title: onNextStep is not a function, functional components
body: <p>I have a parent component with the state which is number, and I'm passing state to RegistrationForm component and <code>setActiveForm</code> to StepperComponent. In the stepper Component, there is a button on which click it should change state. But I'm getting 'onNextStep is not a function'</p>
  <p>Parent component:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useState } from 'react'
  import { Box, Divider, Flex } from '@chakra-ui/react'
  import Logo from 'components/navigation/Logo'
  import Footer from 'components/footer/Footer'
  import RegistrationForm from 'components/forms/RegistrationForm'
  import StepperComponent from 'components/stepper/StepperComponent'
  import Section from 'components/section/Section'
  import { SubTitle, Title } from 'components/UI'
  import SuccessRegistration from 'components/forms/SuccessRegistration'
  
  const RegisterPage = () =&gt; {
      const [activeForm, setActiveForm] = useState&lt;number&gt;(0)
      return (
          &lt;&gt;
              &lt;Box maxWidth="1450px" px={['16px', '43px', '83px']} mx="auto"&gt;
                  &lt;Logo /&gt;
              &lt;/Box&gt;
              &lt;Section pt="23px"&gt;
                  &lt;Box maxWidth="580px" ml={['0', '0', '200px']} mb="25px"&gt;
                      &lt;Title value="React Week 2021- Event Registraton Form" mb="8px" /&gt;
                      &lt;SubTitle
                          value="React Week talks, classes and workshops will feature advanced topics aimed for junior and medior software developers, and consultants."
                          fontSize="16px"
                      /&gt;
                  &lt;/Box&gt;
                  &lt;Divider d={['none', 'none', 'none', 'block', 'block']} /&gt;
                  &lt;Flex flexDirection={['column', 'column', 'row', 'row']}&gt;
                      &lt;StepperComponent onNextStep={setActiveForm} /&gt;
                      &lt;Box&gt;
                          &lt;Divider orientation="vertical" d={['none', 'none', 'none', 'block', 'block']} /&gt;
                      &lt;/Box&gt;
  
                      &lt;RegistrationForm activeForm={activeForm} /&gt;
                  &lt;/Flex&gt;
              &lt;/Section&gt;
              &lt;Footer /&gt;
          &lt;/&gt;
      )
  }
  
  export default RegisterPage</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>RegistrationForm component:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react'
  import { Box } from '@chakra-ui/react'
  import PersonalInfoForm from './PersonalInfoForm'
  import TicketOptionForm from './TicketOptionForm'
  import AdditionalInfoForm from './AdditionalInfoForm'
  import FormContainer from './FormContainer'
  import SuccessRegistration from './SuccessRegistration'
  
  interface Props {
      activeForm: number
  }
  
  const RegistrationForm = ({ activeForm }: Props) =&gt; {
      const forms = [&lt;PersonalInfoForm /&gt;, &lt;TicketOptionForm /&gt;, &lt;AdditionalInfoForm /&gt;]
      return &lt;FormContainer&gt;{forms[activeForm]}&lt;/FormContainer&gt;
  }
  
  export default RegistrationForm</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Stepper component:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useEffect } from 'react'
  import { Box, Button } from '@chakra-ui/react'
  import { Step, Steps, useSteps } from 'chakra-ui-steps'
  
  interface Props {
      onNextStep: React.Dispatch&lt;React.SetStateAction&lt;number&gt;&gt;
  }
  
  const steps = [
      {
          label: 'Step 1',
          description: 'Personal Info',
      },
      {
          label: 'Step 2',
          description: 'Ticket Options',
      },
      {
          label: 'Step 3',
          description: 'Additional Info',
      },
  ]
  
  const StepperComponent = ({ onNextStep }: Props) =&gt; {
      const { nextStep, prevStep, reset, activeStep } = useSteps({
          initialStep: 0,
      })
  
      useEffect(() =&gt; {
          onNextStep(activeStep)
      }, [activeStep])
  
      return (
          &lt;Box w={['100%', '200px']} mt={['12px', '43px']}&gt;
              &lt;Steps activeStep={activeStep} orientation="vertical" colorScheme="blue" textAlign="center"&gt;
                  {steps.map(({ label, description }) =&gt; (
                      &lt;Step label={label} description={description} key={label}&gt;&lt;/Step&gt;
                  ))}
              &lt;/Steps&gt;
              &lt;Button onClick={nextStep}&gt;NextStep&lt;/Button&gt;
          &lt;/Box&gt;
      )
  }
  
  export default StepperComponent</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>