clear store in little-state-machine

Question

I am using little-state-machine (https://github.com/bluebill1049/little-state-machine) with react-router for a wizard on a client's site and I need to reset the store when a user returns to the wizard landing page. I followed this answer in stack overflow (React Little State Machine clear data) but I can’t get it to work. I can’t show the full application, but from the below can you see anything wrong with what I have done.

App.js

createStore({
  data
});

function App() {
  
    return (
      <StateMachineProvider>
        <DevTool />
        <div className="container">
          ...
          <Router>
            <Steps />
          </Router>
        </div>
      </StateMachineProvider>
    );
  }

  export default App;
  

Steps.js

....
import { useStateMachine } from "little-state-machine";
import clearAction from "./lsm/actions/clearAction";
...

export default () => {
    ....
   const location = useLocation();
   const { state, actions } = useStateMachine({ clearAction });
   ...
   
   useEffect(() => {
   
       let step = location.pathname.split("/")[2];
       // landing page location = http://site.co.uk/wizard
       // steps have url = http://site.co.uk/wizard/step[1-4]
       if(!step){
     
           actions.clearAction();
   
       }

   }, []);

return (...);
};

clearAction.js

export default function clearAction(state, payload) {
   return {};
 }