At the moment, I have the following routes in my App.js file:

<Switch>
  <Route exact path="/new-job"
          render={(props) => <NewJob jobName={jobName} setMenuSelection={handleMenuSelection} />}
  />
  <Route exact path="/past-jobs"
          render={(props) => <PastJobs setMenuSelection={handleMenuSelection} />}
 />
</Switch>

Now within my PastJobs component, I have the following button with onClick process:

<Button
    onClick={() => {
      setConfirmDialog({
         isOpen: true,
         title: `Copy Job ${item.id}?`,
         onConfirm: () => { onCopy(item.job_info) }
      })
   }}         
>
Copy
</Button>

that calls the following function:

const onCopy = (job_info) => {
    setConfirmDialog({
        ...confirmDialog,
        isOpen: false
    })
    history.push({
        pathname: '/new-job',
        state: { detail: job_info }
    })
}       

Within my <NewJob /> component, I have now setup the following as I thought I could access the state.detail but unfortunately it's null, i.e.:

import { useLocation } from 'react-router-dom';

function NewJob( { jobName, setMenuSelection } ) {
    
       const { state } = useLocation();
    
       if (typeof state !== 'undefined') {
         const myVal = state.detail
         console.log("myVal", myVal )
       }
    
}

The issue that I am having and unsure how to approach is that within my onCopy function that is called from button onClick, how do I call the the <NewJob /> component whose path is exact path="/new-job" in App.js above and pass in the prop job_info ?