Received NaN for the `children` attribute javascript for loop

Question

I've seen questions asked on this error, but can't see why I'm having the issue. I set my state for allCats here:

  const [allCats, setAllCats] = useState([]);
  const [cats, setCats] = useState([]);

  useEffect(() => {
    fetch(process.env.REACT_APP_API_URL + "cats/", {
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
    })
      .then((res) => res.json())
      .then((res) => setAllCats(res));
  }, []);

Then when I want to retrieve a list of cats from allCats I have a function:

  function startGame() {
    setStarted(true);
    setPlayed(played + 1);
    for (let i = 0; i <= 12; i++) {
      let r = Math.floor(Math.random() * allCats.length - 1);
      cats.push(allCats[r]);
      console.log(allCats[r]);
  }

When I run this function I get a list of 12 cats, but after that I get this error:

The code is working other than that so should I just ignore it? I'm not sure what's causing it and couldn't figure out based on similar questions I've looked at.