title: How to pass props within components with react-router v6
body: <p>I'm struggling to pass props between components with <strong>react-rouer v6</strong></p>
  <p>Here is the routes in App.tsx, I want to pass props from the component (Home) which redirect to this one (EditUser)</p>
  <pre><code>&lt;Routes&gt;
      &lt;Route path={ROUTES.HOME} element={&lt;Home /&gt;} /&gt;
      &lt;Route path={ROUTES.EDIT_USER} element={&lt;EditUser props /&gt;} /&gt;
  &lt;/Routes&gt;
  </code></pre>
  <p>The home page have some functionality to render a table with users</p>
  <p>Here is the function to navigate to the EditUser page to be able to edit<br>
  I want to be able to pass one of the users once the button &quot;edit&quot; is clicked
  <em>(I added the state since I read that was the way to acces from the Edit User page)</em></p>
  <pre><code>  const handleEdit = (user: IUser) =&gt; {
      navigate(ROUTES.EDIT_USER, {
        state: {
          user,
        },
      });
    };
  </code></pre>
  <p>The edit button <em>(Redirection is working It's just the fact to pass that user from components)</em></p>
  <pre><code>&lt;EditButton
     data-testid={`edit-button-${user.id}`}
     text={ES.common.edit}
     onClick={() =&gt; {
        handleEdit(user);
     }}
     &gt;&lt;/EditButton&gt;
  </code></pre>
  <p>Any idea?</p>
  <p>As always, thank you!</p>