How to make the Joyride product tour show up from the first step?

Question

Currently I have a product tour using Joyride. But it doesn't show up from step 1. Instead, it starts from step 6.

This is my code:

const [productTourStep, setProductTourStep] = useState([
    {
      title: 'Swipe Up',
      content:
        'Swipe up, or press the bottom arrow to read more about this person',
      target: '.swipeUp',
      spotlightPadding: 0,
    },
    {
      title: 'Tap Left',
      content: 'To skip, swipe left',
      target: '.tapLeft',
      spotlightPadding: 0,
    },
    {
      title: 'Tap Right',
      content: 'If you like, swipe right',
      target: '.tapRight',
      spotlightPadding: 0,
    },
    {
      title: 'Rewind',
      content: 'Use rewind to undo your last swipe.',
      target: '.rewind',
      spotlightPadding: 0,
    },
    {
      title: 'Boost',
      content:
        'Boost your ego profile for extra visibility. Or use a Quantum Like to increase your chances of manifesting a match',
      target: '#boost',
      spotlightPadding: 0,
    },
    {
      title: 'Customize Your Search',
      content: 'Change your search here',
      target: '.search',
      spotlightPadding: 0,
    },
    {
      title: 'Happy swiping!',
      content: 'May you find the perfect match ',
      target: '.swipeUp',
      spotlightPadding: 0,
    },
  ]);

<Joyride
        steps={productTourStep}
        showProgress={true}
        continuous={true}
        run={true}
        styles={{
          options: {
            primaryColor: '#4DDAD7',
            width: 300,
            zIndex: 1000,
          },
        }}
      />

If I want to go back it works perfectly, though. I have tried adding the stepIndex: 0 but it didn't affect anything.