variable in props won't update itself or cannot access it

i am using the pokemon API and i'm trying to display the types in the cards im displaying but because its in another axios its wont update itself and put it in the types variable

i tried everything please help me

i made a loop inside the axios that prints the types in the console next to the corsponding pokemon but cant get it to print it in my card

import axios from "axios";
import { useEffect } from "react";
import { useState, Fragment } from "react";
import PokeCardComp from "../../components/PokeCardComp";
import Pagenation from "../../components/Pagenation";
// import { toast } from "react-toastify";

const PokemonAPI = () => {
  const [pokeTypes, setPokeTypes] = useState([]);
  const [CopyArray, setCopyArr] = useState([]);
  const [arr, setArr] = useState(CopyArray);
  const [findInput, setFindInput] = useState("");
  const [loading, setLoading] = useState(true);
  const [currentPageURL, setCurentPageURL] = useState(
    "https://pokeapi.co/api/v2/pokemon?=&limit=151"
  );
  const [nextPageURL, setNextPageURL] = useState("");
  const [prevPageURL, setPrevPageURL] = useState("");
  const requestApi = () => {
    // let pokeData = "";
    axios
      .get(currentPageURL)
      .then((res) => {
        setLoading(false);
        setNextPageURL(res.data.next);
        setPrevPageURL(res.data.previous);
        let PokemonArr = JSON.parse(JSON.stringify(res.data.results));
        let arr = [];
        let types = [];
        let firstType = "";
        // console.log(KantoPokemonArr);
        for (let pokemon of PokemonArr) {
          let url = pokemon.url;
          axios.get(url).then((res) => {
            // console.log(res.data.id);
            // setPokeData(res.data);
            types = res.data.types;
            firstType = types[0].type.name;
            // setPokeTypes(firstType);
            console.log(pokemon, firstType);
          });
          let id = pokemon.url
            .replace("https://pokeapi.co/api/v2/pokemon/", "")
            .slice(0, -1);

          const titleCase = (str) => {
            str = str.toLowerCase().split(" ");
            for (var i = 0; i < str.length; i++) {
              str[i] = str[i].charAt(0).toUpperCase() + str[i].slice(1);
            }
            return str.join(" ");
          };

          arr = [
            ...arr,
            {
              name: titleCase(pokemon.name),
              img: `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png`,
              id,
              url,
              types: "please print type here",
            },
          ];
        }

        setCopyArr(JSON.parse(JSON.stringify(arr)));
        setArr(arr);
      })
      .catch((err) => {
        console.log("err", err);
      });
  };

  useEffect(() => {
    setLoading(true);
    requestApi();
  }, []);

  useEffect(() => {
    requestApi();
  }, [currentPageURL]);

  useEffect(() => {
    let regex = new RegExp(findInput, "i"); //create regex tamplate that will try to find the value and wil ignore case
    let PokeCardArrCopy = JSON.parse(JSON.stringify(CopyArray)); //cloneDeep
    PokeCardArrCopy = PokeCardArrCopy.filter((item) => regex.test(item.name));
    setArr(PokeCardArrCopy);
  }, [findInput]);

  if (loading) return "loading...";

  const handleNextPage = () => {
    setCurentPageURL(nextPageURL);
  };
  const handlePrevPage = () => {
    setCurentPageURL(prevPageURL);
  };
  const handleFindInputChange = (ev) => {
    setFindInput(ev.target.value);
  };

  const handlePokemonCardDelete = (ev) => {
    // console.log(arr);
    arr = arr.filter((item) => item.name !== ev.target.name);
    setArr(arr);
  };

  return (
    <Fragment>
      <div className="form-floating mb-3">
        <input
          type="text"
          className="form-control"
          id="floatingInput"
          placeholder="Find"
          value={findInput}
          onChange={handleFindInputChange}
        />
        <label htmlFor="floatingInput">Find</label>
      </div>
      <Pagenation
        goToNextPage={handleNextPage}
        gotToPrevPage={handlePrevPage}
      />
      <div className="row row-cols-1 row-cols-md-4 g-4">
        {arr.map((item) => (
          <PokeCardComp
            key={"PokemonCard" + item.id}
            name={item.name}
            img={item.img}
            id={item.id}
            url={item.url}
            types={item.types}
            onDelete={handlePokemonCardDelete}
            // pokeData={getPokemonData}
          />
        ))}
      </div>
      <Pagenation
        goToNextPage={handleNextPage}
        gotToPrevPage={handlePrevPage}
      />
    </Fragment>
  );
};

export default PokemonAPI;