title: How to pass props using element in react-router v6?
body: <p>I'm trying to reuse my MainSection component for two different purposes (single story and all stories). To effect this, I want to pass in a property, home, in the Routes that go to those renderings of that component. Home is true or false, and I want to render the MainSection component based on that boolean. However, I home keeps being undefined when MainSection gets rendered. The link and route are updating the URL, but not rendering with the props I want. Am I doing something wrong?</p>
  <p>Here are my routes:</p>
  <pre><code>function Routes(){
    return(
      &lt;Switch&gt;
        &lt;Route path=&quot;/&quot;  element={&lt;MainSection home={true} /&gt;} /&gt;
        &lt;Route path=&quot;/story&quot; element={ &lt;MainSection home={false} /&gt;} /&gt;
      &lt;/Switch&gt;
    )
  }
  </code></pre>
  <p>and here is the code for my MainSection component:</p>
  <pre><code>function MainSection({ home }){
    console.log(home)
    return(
      &lt;div className=&quot;main-section&quot;&gt;
        &lt;BigPicture home={ home }/&gt;
        &lt;Quotes home={ home }/&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>The console log keeps returning undefined.</p>
  <p>Thanks!</p>