Form input fields in outlet are not initializing when route changes

[neon marlin]

I am working though the tutorial at https://remix.run/docs/en/v1/tutorials/blog#homework. I was trying to make it so one could update the blog posts. My issue is that when one clicks on a different blog post to update, it loads a new dynamic nested route but the values on the form do not change. Labels change, but not the input forms.
For example: If I click on 1st simple example, it loads the first screenshot. If I then click on 2nd simple example, the view updates to the 2nd screenshot. Note how the labels changed, but not the form values. If I then reload the webpage (press F5), the problem goes away.

I have tried using value and defaultValue on the input fields with the same results.

Here is my code for app\routes\posts\admin\$slug.tsx

[narrow root]

On the input that sets the default value, add a "key" with the default value. This will force the component to re-mount when the value changes re-setting the default of the input to the new value.

We do not unmount route modules between route changes when not needed.

I.e: <input key={data.value} defaultValue={data.value />

[neon marlin]

Interesting. Okay I'll try it, thank you.