State machine wizard Context

StateMachineWizard.tsx

const StateMachineWizardContext = createContext({});
    
export const StateMachineWizard = (/* props goe here */) => {
  const contextValue = useMemo(
    () => ({
      errors,
      setStepData,
      setErrors,
      navigateTo,
    }),
    [errors, setStepData, setErrors, navigateTo]
  );
    
    // ... in the modal body
    <StateMachineWizardContext.Provider value={contextValue}>
        <WizardSteps
          wizardNavHistory={navHistory}
          wizardDataByStep={wizardDataByStep}
          curStepName={curStepName}
        />
    </StateMachineWizardContext.Provider>
}

// use this hook on client's step component side
export const useStateMachine = () => {
  // TODO: handle some common common logic
  return React.useContext(StateMachineWizardContext);
};