How to pass data from parent to child react component using NAV LINK?

Question

I am trying to pass data from a parent component (campaign details) to a child component (dashboard or user page) that is rendered within it. I am getting null value.

Here is my setup

App.js

<Route path="campaigns/:id" element={<CampaignDetails />}>
  <Route index element={<CampaignDashboard />} />
  <Route path="dashboard" element={<CampaignDashboard />} />
  <Route path="users" element={<CampaignUsers />} />
  <Route path="users/:userId" element={<CampaignUserDetails />} />
</Route>

CampaignDetail.js

const [campData, setCampData] = useState({
name: 'test',
lastName:'test2',
street: '123'
});

return (
  <div>
    <NavCampaign campInfo={campData} />
  </div>
);

NavCampaign.js

import { Link, Outlet } from "react-router-dom";
const NavCampaign = (campInfo) => {

return (
 <ul> <li>
    <Link
      
      to={{
        pathname: `dashboard`,
        state: { campInfo: campInfo.campInfo },
      }}
    >
      dashboard
    </Link> 
  </li>
  <li>
   <Link  to='users'>users</Link>
  </li> </ul>
<Outlet />
)};

Finally the child component campaignDashboard.js

const CampaignDashboard = () => {
  const { id } = useParams();
  const {state} = useLocation();
  console.log(state); // return null

  return (
    <div>
      dashboard
    </div>
  );
};

export default CampaignDashboard;