In "Intro.js" and "Intro.js-react", the first step appears twice

[hiroshinishio]

Description

The issue is like this.

When I visited our website (https://workstats.dev/) or reloaded, a pop-up (Step 1) starts as this screenshot below. The progress bar displays no blue, which means 0. And for some reason, the position is in the upper left corner. This is an incorrect pop-up that I did not expect.

And here, if you press "Next", the same content (Step 1) is displayed again. It is almost the same content as before, but the position is centered correctly and the progress bar shows a little blue, which means 1. This is the correct pop-up that I expected.

The code looks like this.

Expected Behavior

Step 1 should appear only once in the middle of the screen, as in the second screenshot.

Actual Behavior

In fact, however, the above code executes Step 1 twice, and the position of the result of the first execution and the progress bar display are both wrong. Therefore, the first execution seems to be wrong.

Errors and Screenshots (optional)

See above.

Example (recommended)

import dynamic from 'next/dynamic';
import { useState } from '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, everything will be displayed.'
      position: 'float' // means center
    },
    {
      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;

Environment (optional)

{
  "name": "polygon-hr",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://workstats.dev",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "postbuild": "next-sitemap --config sitemap.config.js",
    "start": "next build && next start",
    "lint": "next lint",
    "test": "jest --watch",
    "cypress": "cypress open"
  },
  "dependencies": {
    "@emailjs/browser": "^3.6.2",
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@mui/icons-material": "^5.8.0",
    "@mui/material": "^5.8.0",
    "@popperjs/core": "^2.11.5",
    "@types/gapi": "0.0.41",
    "@types/gapi.auth2": "0.0.56",
    "asana": "^0.18.14",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^28.1.0",
    "chart.js": "^3.7.1",
    "firebase": "^9.8.1",
    "firebase-admin": "^10.2.0",
    "flowbite": "^1.4.5",
    "intro.js": "^6.0.0",
    "intro.js-react": "^0.6.0",
    "moment": "^2.29.3",
    "next": "^12.1.6",
    "next-sitemap": "^2.5.21",
    "nookies": "^2.5.2",
    "react": "^18.1.0",
    "react-chartjs-2": "^4.1.0",
    "react-dom": "^18.1.0",
    "react-firebase-hooks": "^5.0.3",
    "react-loading": "^2.0.3",
    "react-responsive": "^9.0.0-beta.10",
    "sharp": "^0.30.5",
    "styled-components": "^5.3.5",
    "swr": "^1.3.0"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@types/asana": "^0.18.5",
    "@types/node": "^17.0.34",
    "@types/react": "^18.0.9",
    "@typescript-eslint/eslint-plugin": "^5.24.0",
    "autoprefixer": "^10.4.7",
    "cypress": "^9.6.1",
    "eslint": "^8.15.0",
    "eslint-config-next": "12.1.6",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-unused-imports": "^2.0.0",
    "jest": "^28.1.0",
    "postcss": "^8.4.13",
    "tailwindcss": "^3.0.24",
    "typescript": "^4.6.4"
  }
}