useStateMachine | The < 1 kb state machine hook for React | Frontend Framework library

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

I built a multistep form using react-hook-form with a dynamic fields array using useFieldArray.

Documentation: useFieldArray documentation

Here is the full working code link: React Multi-step form with useFieldArray

In the 2nd step when I add new fields using add a dog button, everything works fine, the new data of step is saved to localstorage using little state machine.

But when I click the previous button, the added fields disappear whereas data is still in localstorage.

code for 2nd step:

This is a React style question.

TL;DR Take the set function from React's useState. If that function "changed" every render, what's the best way to use it in a useEffect, with the Effect running only one time?

Explanation We have a useEffect that needs to run once (it fetches Firebase data) and then set that data in application state.

Here is a simplified example. We're using little-state-machine, and updateProfileData is an action to update the "profile" section of our JSON state.

So i put together this Dynamic Form Below (Hotel Rooms) and inside it you can also create dynamic forms (Room Beds). It works, i can add rooms & Beds and the object array is returned in the console.log (onSubmit).

codesandbox: https://codesandbox.io/s/charming-hermann-nzpbu?file=/src/App.js

Issue: If you add room1 and room2 and then delete room1, the array stays of length 2 and now it has "beds undefined" and it keeps growing when you add beds to other rooms! Help me solve this:

Object returned when you press next (in console). As you can see the array is not subtracting but it is also leaving the beds undefined when i delete a room:

I'm using react-hook-form to store form data that is split into two pages as per the code seen on Codesandbox.io. I am able to successfully store simple text inputs (like first name, email, etc) using property assignments like defaultValue={state.data.firstName} for example...but I can't figure out how to store the checked item in the radio group using the model suggested by react-hook-form. I've checked their documentation, and it's unfortunately sparse in mentioning radio button group state storage. Is this possible using their API?