El asunto es así.

Cuando se vuelve a cargar, aparece una ventana emergente como esta captura de pantalla a continuación. La barra de progreso muestra 0. Y por alguna razón, la posición está en la esquina superior izquierda.

Y aquí, si presionas "Siguiente", se vuelve a mostrar el mismo contenido. Este es el problema esta vez. Es casi el mismo contenido que antes, pero la posición es correcta y la barra de progreso muestra 1. (Se muestra una pequeña barra azul)

El código se ve así.

 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;

¿Alguien sabe por qué y cómo solucionarlo?