问题是这样的。
当重新加载时，会弹出一个如下图所示的屏幕截图。进度条显示为0。由于某些原因，位置在左上角。

而在这里，如果你按下“下一步”，同样的内容又显示出来了，这次就是问题所在，和之前几乎是一样的内容，只是位置正确，进度条显示1.（一个蓝色的小条正在显示）

代码如下所示。

import dynamic from 'next/dynamic';
import { useState } from 'react';

// Intro.js, see the details here: https://introjs.com/
// Intro.js-react, see the details here: https://github.com/HiDeoo/intro.js-react
// @ts-ignore
const Steps = dynamic(() => import('intro.js-react').then((mod) => mod.Steps), {
  ssr: false
});

const Onboarding = () => {
  const [stepEnabled, setStepEnabled] = useState(true);
  const steps = [
    {
      element: '#entire-screen',
      title: 'Welcome!!',
      intro:
        'This is your dashboard. Once you have set up, everything will be displayed.'
    },
    {
      element: '#user-settings',
      title: 'How to go to User Settings page? (1)',
      intro: 'You can jump to the User Settings page from sidebar.',
      position: 'right'
    }
  ];
  const onExit = () => {
    setStepEnabled(false);
  };
  const options = {
    showProgress: true,
    showBullets: true,
    exitOnOverlayClick: true,
    exitOnEsc: true,
    nextLabel: 'Next',
    prevLabel: 'Prev',
    // skipLabel: 'Skip',
    hidePrev: true,
    doneLabel: 'Done',
    overlayOpacity: 0.5,
    overlayColor: '#000',
    showStepNumbers: true,
    keyboardNavigation: true,
    scrollToElement: true,
    helperElementPadding: 10,
    showButtons: true
  };

  return (
    <Steps
      // @ts-ignore
      enabled={stepEnabled}
      steps={steps}
      initialStep={0}
      onExit={onExit}
      options={options}
    />
  );
};

export default Onboarding;

有谁知道为什么以及如何修复它吗？