import { useEffect } from 'react' ; import { useFormWizardContext } from './form_wizard_context' ; interface Props { id : string ; label : string ; children : JSX . Element ; isRequired ? : boolean ; } export const FormWizardStep = ( { id , label , isRequired , children } ) => { const { activeStepId , addStep } = useFormWizardContext ( ) ; useEffect ( ( ) => { addStep ( id , label , isRequired ) ; } , [ id , label , isRequired , addStep ] ) ; return activeStepId === id ? children : null ; } ;