React Material-ui form component

You need to wrap your App (root component) with the AppContext provider.

1. Move AppContext from formContent to App component and create context with values and setters and other functions you want.

export const AppContext = createContext({
  activeStep: 0,
  values: [],
  handleFormChange() {},
  handleNext() {},
  handleBack() {}
});

export default function App() {
  const [values, setValues] = useState({
    nni: "",
    nom: "",
    prenom: "",
    email: "",
    typeHabilitation: "",
    perimetreHabilitation: ""
  });

  return (
    <AppContext.Provider value={{ values, setValues }}>
      <Form />
    </AppContext.Provider>
  );
}

2. Now use this context in both formulaireValidation and SummaryForm components.

export default function formulaireValidation({ submitForm }) {
   ...
   ...
  const { values, setValues } = useContext(AppContext);
  ...
  ...

}

export default function SummaryForm(props) {
  const { values, handleBack, handleNext } = useContext(AppContext);
  ...
  ...
}

Working Demo