score:1

Accepted answer

you have quite a few problems in your code, for example, you shouldn't pass imperative api like that, should rely on props/onchange callbacks api instead, it's more react way. take a look at react docs on how components should interact with each other:

https://reactjs.org/docs/components-and-props.html

but if you just want an answer to the question, then the problem is here:

<main key={uuid.v4()}/>

you generate a unique key on every re-render. this will cause react to identify the entire component as a "new" component among its siblings, un-mount it, and mount it back from scratch. which results in your state "resetting" to the default one.

"key" is usually used in the list-like components, you don't need it here. just remove it and the state will go back to "normal" behaviour.


Related Query

More Query from same tag