The issue is like this.

When reloaded, a pop-up starts as this screenshot below. The progress bar displays 0. And for some reason, the position is in the upper left corner.

And here, if you press "Next", the same content is displayed again. This is the problem this time. It is almost the same content as before, but the position is correct and the progress bar shows 1. (A little blue bar is showing)

The code looks like this.

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;

Does anyone know why and how to fix it?