我尝试在NextJs中使用第三方软件包ReactPhotoSphereViewer在网站中显示全景图像。该软件包在NextJs和ReactJs中都可以使用。
下面是在ReactJs中工作的代码：

import { ReactPhotoSphereViewer } from 'react-photo-sphere-viewer';
import React, {createRef, useEffect} from 'react';

...
function PanoramaImage({src}) {
  return (
    <ReactPhotoSphereViewer 
      src={src}
    ></ReactPhotoSphereViewer>
  );
} 
...
export default PanoramaImage;

以下是NextJs中用于相同目的的代码：

import React, {createRef, useEffect} from "react";
import dynamic from 'next/dynamic'

const ReactPhotoSphereViewer = dynamic(
  () =>
    import('react-photo-sphere-viewer').then(
      (mod) => mod.ReactPhotoSphereViewer
    ),
  {
    ssr: false,
  }
)

...
function PanoramaImage({src}) {
    return (
      <div>
        <ReactPhotoSphereViewer
            src={src}
        ></ReactPhotoSphereViewer>
      </div>
    )
}
...

export default PanoramaImage;

然而，当我尝试添加对ReactPhotoSphereViewer组件的引用时，它在ReactJs中工作，但在NextJs中不工作。
下面是添加引用后的代码。

...
function PanoramaImage({src}) {
  const photoSphereRef = createRef(<ReactPhotoSphereViewer />);

  React.useEffect(() => {
    if (!photoSphereRef.current)
      return;

    photoSphereRef.current.toggleAutorotate();
  }, [photoSphereRef]);

    return (
      <div>
        <ReactPhotoSphereViewer
            ref={photoSphereRef}
            src={src}
        ></ReactPhotoSphereViewer>
      </div>
    )
}
...

export default PanoramaImage;

我认为问题出在createRef钩子上，那么，有没有什么方法可以代替createRef，或者如果我用错了，应该怎么纠正呢？
如果你能帮忙我会很高兴的。谢谢。

编辑：问题不在createRef上，我在ReactJs和NextJs框架中都使用了useRef而不是createRef，ReactJs工作得很完美，但是我不知道为什么，NextJs没有检测到引用。最后我放弃使用NextJs，开始使用ReactJs。谢谢大家。