title: react-router-dom v6 useNavigate passing value to another component
body: <p>The version of react-router-dom is v6 and I'm having trouble with passing values to another component using Navigate.</p>
  <p>I want to pass selected rows to another page called Report. But, I'm not sure I'm using the right syntax for <code>navigate</code> method and I don't know how to get that state in the Report component.</p>
  <p>Material-ui Table: I'm trying to use <code>redirectToReport(rowData)</code> in <code>onClick</code> parameter.</p>
  <pre><code>function TableRows(props){
  return (
      &lt;MaterialTable
          title=&quot;Leads&quot;
          columns={[
              ...
          ]}
          data = {props.leads}       
          options={{
              selection: true,
              filtering: true,
              sorting: true
          }}
          actions = {[{
              position: &quot;toolbarOnSelect&quot;,
              tooltip: 'Generate a report based on selected leads.',
              icon: 'addchart',
              onClick: (event, rowData) =&gt; {
                  console.log(&quot;Row Data: &quot; , rowData)
                  props.redirect(rowData)
              }
          }]}
      /&gt;
  )}
  </code></pre>
  <p>LeadTable component</p>
  <pre><code>export default function LeadTable(props) {
  let navigate = useNavigate();
  
  const [leads, setLeads] = useState([]);
  const [loading, setLoading] = useState(true);    
  
  async function fetchUrl(url) {
      const response = await fetch(url);
      const json = await response.json();
  
      setLeads(json[0]);
      setLoading(false);
  }
  
  useEffect(() =&gt; {
      fetchUrl(&quot;http://localhost:5000/api/leads&quot;);
  }, []);
  
  function redirectToReport(rowData) {
      navigate('/app/report', { state: rowData }); // ??? I'm not sure if this is the right way
  }
  
  return(
      &lt;div&gt;
          &lt;TableRows leads={leads} redirect={redirectToReport}&gt;&lt;/TableRows&gt;
      &lt;/div&gt;
  )}
  </code></pre>
  <p>Report component</p>
  <pre><code>export default function ReportPage(state) {
  return (
      &lt;div&gt;
          { console.log(state) // This doesn't show anything. How to use the state that were passed from Table component here?}
          &lt;div className = &quot;Top3&quot;&gt;
            &lt;h3&gt;Top 3 Leads&lt;/h3&gt;
              &lt;ReportTop3 leads={[]} /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  );}
  </code></pre>