How can one keep react-hook-form forms isolated on dynamic routes in react-router?

I am building a React web application which uses react-hook-form for form control and react-router-dom for handling routing.

The issue is that I have a dynamic route which contains a form, and the forms on each page are sharing data when they should be logically isolated.

To try and solve the issue, I created this example app to illustrate the problem:

import './App.css'
import { createBrowserRouter, NavLink, Outlet, RouterProvider, useLoaderData } from 'react-router-dom'
import { useForm } from 'react-hook-form'
const router = createBrowserRouter([
{
path: '/',
element: (
<>
<h1>Router Issue Example</h1>
<nav>
<NavLink to="forms/1">Pick Form 1</NavLink>
<span>   |   </span>
<NavLink to="forms/2">Pick Form 2</NavLink>
<span>   |   </span>
<NavLink to="forms/3">Pick Form 3</NavLink>
</nav>
<Outlet />
</>
),
children: [
{
path: 'forms/:dynamicId',
loader: DynamicFormPageLoader,
element: <DynamicFormPage />
}
]
},
])
function DynamicFormPageLoader({params}: any) {
const dynamicId = params.dynamicId
return {dynamicId}
}
function DynamicFormPage() {
const {dynamicId} = useLoaderData() as {dynamicId: string};
const {register, handleSubmit} = useForm()
return (
<>
<h2>Dynamic Form Page</h2>
<form onSubmit={handleSubmit((data) => {
console.log(data);
})}>
<label>
{`Form${dynamicId}-question #1 `}
<input type="text" {...register(`${dynamicId}-question1`)} />
</label>
<label>
{`Form${dynamicId}-question #2 `}
<input type="text" {...register(`${dynamicId}-question2`)} />
</label>
<label>
{`Form${dynamicId}-question #2 `}
<input type="text" {...register(`${dynamicId}-question2`)} />
</label>
<button type="submit">Submit</button>
</form>
</>
)
}
function App() {
return (
<>
<RouterProvider router={router}/>
</>
)
}
export default App

In this example, if I go to forms/1 and submit some data in the form and then go to form 2 or 3, it will have that data in the form and when I submit the data, it will submit it as if it was all one form. The desired behavior is for each form to be entirely isolated from one another such that submitting data in one form only logs the data in the others.

UPDATE: New Solution Found

I ended up rooting out the core issue here and found a more seamless solution. Just add a key attribute to the form element of each DynamicFormPage element like so...

import './App.css'
import { createBrowserRouter, NavLink, Outlet, RouterProvider, useLoaderData } from 'react-router-dom'
import { useForm } from 'react-hook-form'
const router = createBrowserRouter([
{
path: '/',
element: (
<>
<h1>Router Issue Example</h1>
<nav>
<NavLink to="forms/1">Pick Form 1</NavLink>
<span>   |   </span>
<NavLink to="forms/2">Pick Form 2</NavLink>
<span>   |   </span>
<NavLink to="forms/3">Pick Form 3</NavLink>
</nav>
<Outlet />
</>
),
children: [
{
path: 'forms/:dynamicId',
loader: DynamicFormPageLoader,
element: <DynamicFormPage />
}
]
},
])
function DynamicFormPageLoader({params}: any) {
const dynamicId = params.dynamicId
return {dynamicId}
}
function DynamicFormPage() {
const {dynamicId} = useLoaderData() as {dynamicId: string};
const {register, handleSubmit} = useForm()
return (
<>
<h2>Dynamic Form Page</h2>
<form 
key={dynamicId} // <---- Add a key attribute 
onSubmit={handleSubmit((data) => {
console.log(data);
})}>
<label>
{`Form${dynamicId}-question #1 `}
<input type="text" {...register(`${dynamicId}-question1`)} />
</label>
<label>
{`Form${dynamicId}-question #2 `}
<input type="text" {...register(`${dynamicId}-question2`)} />
</label>
<label>
{`Form${dynamicId}-question #2 `}
<input type="text" {...register(`${dynamicId}-question2`)} />
</label>
<button type="submit">Submit</button>
</form>
</>
)
}
function App() {
return (
<>
<RouterProvider router={router}/>
</>
)
}
export default App

Turns out the issue was (mostly) unrelated to both react-hook-form and react-router; it was just that React evaluates whether elements in the DOM are the "same" based on whether the same type of element is in the same spot. Because the dynamic route doesn't actually change the DOM structure, React considers them the same element and persists the state.

A better explanation of the root issue can be found in this video by Web Dev Simplified

You could reset the form state when the dynamicId route parameter updates. Use the useEffect hook to "react" to the route param value updating.

function DynamicFormPage() {
  const { dynamicId } = useParams() as { dynamicId: string };
  const { handleSubmit, register, reset } = useForm();

  useEffect(() => {
    reset(); // <-- pass any reset options, if necessary
  }, [dynamicId, reset]);
  
  return (
    <>
      <h2>Dynamic Form Page</h2>
      <form onSubmit={handleSubmit((data) => {
        console.log(data);
      })}>
        <label>
          {`Form${dynamicId}-question #1 `}
          <input type="text" {...register(`${dynamicId}-question1`)} />
        </label>
        <label>
          {`Form${dynamicId}-question #2 `}
          <input type="text" {...register(`${dynamicId}-question2`)} />
        </label>
        <label>
          {`Form${dynamicId}-question #2 `}
          <input type="text" {...register(`${dynamicId}-question2`)} />
        </label>
        <button type="submit">Submit</button>
      </form>
    </>
  );
}