I have a problem fetching data from my data base when I search by ID

I'm working on a personal MERN project, on my React application I'm fetching data by Id using useEffect, and works just fine, I'm able to get each element and work with them, the problem is when I reload the page I get this error 'TypeError: Cannot read properties of undefined (reading 'cards')', this is how I'm fetching the data:

const handleOnFetchOneChannel = async (_id) => {
  const oneChannel = await axios.get(`http://localhost:8000/channels/channel/${_id}`)
    .then((response) => {
      return response.data
    });

  dataBaseContext.fetchOneChannel({ oneChannel, _id });
  navigate(`/channels/channel/${_id}`)
};

and then I call the function 'handleOnFetchOneChannel' on a click event and pass the _id to the function, I'm assuming that the first time that I click on the button I get the data correctly but as soon as I reload the page there is nothing that calls the data because it is called on a click event, but then how is the correct way to fetch the data and the information persist throughout reloads