import React , { PropsWithChildren } from 'react' ; import { Tree } from './Shared' ; import { useControls } from './Controls' ; export interface StepProps < T > { name : keyof T ; } param props export function Step < T extends Tree > ( { children , name , } ) { const { step , tree } = useControls < T > ( ) ; React . useEffect ( ( ) => { if ( ! Object . keys ( tree ) . includes ( name as string ) ) { console . warn ( `Step component with name ${ name } is not found in step tree!` ) ; } } , [ name , tree ] ) ; return < > { step === name && children } < />; }