title: v6 react-router returns `null` state in location when state given a function property
body: <p>I am doing a nested routers layout. I have a parent component that needs to render a list of N children. Additionally, I want to pass a function <code>(id: string) =&gt; Observable&lt;X&gt;</code> from parent to child. Currently, I am doing:</p>
  <pre class="lang-js prettyprint-override"><code>// parent.tsx
  
  function getStream(id: string): Observable&lt;X&gt;; // assume exists
  
  function Parent() {
    const child_links = children_data.map(child_data =&gt; (
      &lt;Link
        to={...}
        state={{ child_data, getStream }}
      /&gt;
    ));
  
    ...
    // return some output with `child_links` embedded
  }
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>// child.tsx
  import { useLocation } from 'react-router';
  
  function Child() {
    const location = useLocation();
  
    // The issue I am facing:
    // returns { child_data: {...} } if I choose to omit `getStream` in `Parent`;
    // returns `null` when `getStream` included; expected `getStream` to exist and be function I passed
    console.log(location.state);
  
    // some arbitrary rendering
  }
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>//index.tsx, where Router defined:
  
  ReactDOM.render(
    &lt;div&gt;
      &lt;BrowserRouter&gt;
        &lt;Routes&gt;
          &lt;Route path='/' element={&lt;Parent /&gt;}&gt;
            &lt;Route path='children/:child_id' element={&lt;Child /&gt;} /&gt;
          &lt;/Route&gt;
        &lt;/Routes&gt;
      &lt;/BrowserRouter&gt;
    &lt;/div&gt;,
    document.getElementById('root')
  );
  </code></pre>
  <p>Other ridiculous things I have tried:</p>
  <ul>
  <li>Wrapping the function in an object, passed through constructor. Effect: causes same <code>null</code> state problem.</li>
  <li>Wrapping the function in an object, as a method. Effect: does not cause <code>null</code> state, but the associated property of <code>state</code> ends up just being an empty object. this tells me that react-router is likely doing less-than-smart hash object cloning.</li>
  </ul>
  <p>Things I <em>think</em> would be better avoided:</p>
  <ul>
  <li>Just creating a static controller object that serves up the <code>Observable</code></li>
  <li>Using the <code>Context</code> system from <code>react</code></li>
  </ul>
  <p>Am I abusing <code>state</code> here? If <code>Links</code> are to be used in a nest router setting, am I expected not to share upstream state with downstream components?</p>
  <p>Thanks!</p>