I'm using state management called little-state-management in my React-Hook-Form. I first created this in codesandbox before implementing it in my project.

I've wrapped my App.js with the StateMachineProvider

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";
import { StateMachineProvider, createStore } from "little-state-machine";

createStore({
  yourDetails: {
    firstName: "",
    lastName: "",
    address: "",
    number: "",
  },
});

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <StateMachineProvider>
        {" "}
        <App />
      </StateMachineProvider>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

reportWebVitals();

What I'm doing is a multi-step form. I then put the navigations for the Step1 and Step2 inside the App.js

 <Routes>
          {!isLoading ? (
            <>
              <Route
                path="/"
                element={
                  <MainLayout>
                    <SignInPage />
                  </MainLayout>
                }
              />
              <Route
                path="/Homepage"
                element={
                  <PrivateRoute>
                    <Home />
                  </PrivateRoute>
                }
              />
               

        

              <Route exact path="/step1" element={<Step1 />} />
              <Route path="/step2" element={<Step2 />} />
            </>
          ) : (
            <>
              <Route
                path="/"
                element={
                  <MainLayout>
                    <SignInPage />
                  </MainLayout>
                }
              />
            </>
          )}

        </Routes>

Am I wrapping the state management correctly?