I want to update the state of a function component from a lower order component. However, I have been unsuccessful at doing this. Sometimes, React state management confuses me.

In the code sample I provide, when someone clicks on a fruit-item, it can be edited. Apparently, React does not fire the callback inside the useEffect hook. Neither has the state been updated using the _finishEdit function.

The following is the code sample.

Thank you for your help !