Third party components reset state to initial value when trying to update

Question

I have an array of values stored in App.jsx using useState(). I map through that array to create one Mathquill box for each child. Each Mathquill box is passed one element and a function to modify that element. State updates fine until you try updating a second box -- then the state gets reset to the default value. This problem exists for multiple third party libraries, but does not exist for a simple html input element.

Example: https://codesandbox.io/s/flamboyant-sun-drdfg

Answer 1

Using the previous value parameter of the setValue() function fixes the problem. https://codesandbox.io/s/unruffled-engelbart-rxsld?file=/src/App.js