问在Intro.js和Intro.js-react中，第一和第二步的位置不正确

EN

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 = [
    {
      title: 'Welcome!!',
      intro:
        'This is your dashboard. Once you have set up, numbers will be displayed.'
    },
    {
      element: '#user-settings',
      title: 'User Settings page',
      intro: 'You can jump to the User Settings page from here.',
      position: 'right'
    },
    {
      element: '#profile-list',
      intro: 'This is your profile list.',
      position: 'right'
    },
    {
      element: '#card-list',
      intro: 'This is your card list.',
      position: 'left'
    }
  ];
  const onExit = () => {
    setStepEnabled(true);
  };
  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
  };

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

export default Onboarding;