I am perplexed.

So, I have this textarea element that I am using as a note field. I have the text area load new defaultValues depending on what item is selected in a select. The select changes the state in the parent.

Each select objects look like this:

movie: { id: string; name: string; note: string}

When the select changes, I have a useState that changes to the new selection.

The idea is to be able to enter notes about each item in the select, and read the new notes when the item in the select changes. So the textarea takes the movie.note as its defaultValue.

This was working perfectly until I moved the select into its own FC and passed state into it from the parent.

After I moved the select to its own component, the notefield loads the notes for each item in the select UNTIL I edit one of the notes. Then it stops loading new notes at all. It still remains editable, but the loaded notes never update again after I type in the text area.

Again, this wasn't an issue until I moved the select into its own component, but what is weird is that all my other inputs load data from each item in the select perfectly, even after editing. And state is still updating correctly, and the correct notes are even being logged from the note component....just not displayed.

Any ideas on what the issue is here?