How I can display steps instead of hints?

[andreynav]

Describe the bug

After a page is render hint is displayed (with "Got it" button, without "Next" and "Skip" buttons, without step numbers)

import { Hints, Steps } from 'intro.js-react'
import 'intro.js/introjs.css'

export const Main = ({ region, setRegion }: { region: RegionT; setRegion: SetRegionT }) => {
  ...
  const [stepsEnabled, setStepsEnabled] = useState<boolean>(true)
  const [initialStep, _setInitialStep] = useState<number>(0)
  const [hintsEnabled, _setHintsEnabled] = useState<boolean>(true)
  const [steps, _setSteps] = useState([
    {
      element: '.toggle',
      intro: 'This is the theme switcher. You can select dark and light theme'
    },
    {
      element: '.search',
      intro: 'This is the select where you can choose world region'
    },
    {
      element: '.search',
      intro: 'This is search field for any country in the region'
    }
  ])
  const [hints, _setHints] = useState([
    {
      element: '.toggle',
      hint: 'This is the theme switcher. You can select dark and light theme',
      hintPosition: 'middle-middle'
    },
    {
      element: '.customSelect',
      hint: 'This is the select where you can choose world region',
      hintPosition: 'middle-middle'
    },
    {
      element: '.search',
      hint: 'This is search field for any country in the region',
      hintPosition: 'middle-middle'
    }
  ])

  return (
    <MainWrapper>
      <Steps
        enabled={stepsEnabled}
        steps={steps}
        initialStep={initialStep}
        onExit={onExit}
        options={{
          showButtons: true,
          nextLabel: 'Next',
          prevLabel: 'Back',
          hidePrev: false,
          hideNext: false,
          showStepNumbers: true
        }}
      />
      <Hints
        enabled={hintsEnabled}
        hints={hints}
      />
      <Container>
        <Controls search={search} setSearch={setSearch} region={region} setRegion={setRegion} />
        {error ? getProperErrorComponent(error) : <CardList countries={countriesData} />}
      </Container>
    </MainWrapper>

To Reproduce

1. Open a page

Expected behavior

Steps is displayed after page is loaded

How often does this bug happen?

Every time

System Info

No response

Additional Context

No response

[andreynav]

Hm... Looks like this row fix the bug:

<Steps
        enabled={stepsEnabled || true}
        ...
/>

Probably it would be worth adding to the package documentation