I am having an issue where, if I load my page for the first time things work perfectly fine. However when I try to navigate to another page, my api data is just completely lost.

Here is my tree:

App – Homepage
Pokemon – PokemonCard <— Here is where I think my issue is. The data is passed as a prop from the Pokemon component to the PokemonCard component

So for additional context, I am making an API call in a page, then passing that api data to the rendered child component. However the data seems to be lost in the process.

Here is the code for my pokemon page. Please let me know if youd like to see other code snippets.

import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import PokemonCard from "./PokemonCard";
import axios from 'axios'

function PokemonPage() {

    const [pokemon, setPokemon] = useState();
    const { currentPokemon } = useParams();

    useEffect(() => {
        console.log("PokemonPage Mounted")
    }, [])

    useEffect(() => {
      const getPokeDetails = async () => {
          const response = await axios.get(
            `https://pokeapi.co/api/v2/pokemon/${currentPokemon}`
          );
          console.log(`API Data for ${currentPokemon} Loaded`)
          setPokemon(response.data);
        // const firstFourMoves = results.moves.slice(0,4).map(move => move.move.name);
        // setMoves(firstFourMoves)
      };

      getPokeDetails();
    }, [currentPokemon]);


    return (
    <>
        <h2>{currentPokemon}</h2>
        <PokemonCard pokemon={pokemon}/>
    </>
    )
}
export default PokemonPage;