Добавить элемент из Fetch API в массив и отобразить новый массив в React

Я впервые изучаю реакцию, у меня есть приложение, в котором оно извлекает некоторые данные из общедоступного API. В настоящее время у меня отображается 10 карточек со случайными элементами из API, и я добавил кнопку для извлечения случайного элемента из API и добавления его в массив, мне удалось добавить новый элемент в массив с помощью push() но в самом приложении это не отображается. Как я могу сделать так, чтобы новый элемент отображался и в приложении?

Вот мой код

Home.js

import { useState, useEffect} from "react";
import Card from './Card';
const Home = () => {

    const [animals, setAnimals] = useState([]);

    const handleDelete = (id) => {
        const newAnimals = animals.filter(animal => animal.id !== id);
        setAnimals(newAnimals);
    }

    useEffect(() => {
        fetch('https://zoo-animal-api.herokuapp.com/animals/rand/10')
        .then(res => {return res.json()})
        .then(data => {
            setAnimals(data);
        });
    }, []);

    const handleAddAnimal = () => {
        fetch('https://zoo-animal-api.herokuapp.com/animals/rand/')
        .then(res => {return res.json()})
        .then(data => {
            animals.push(data);
            console.info(animals);
            //what to do after this
        })
    }

    return (
        <div className = "home">
            <h2>Animals</h2>
            <button onClick = {handleAddAnimal}>Add Animal</button>
            <Card animals = {animals} handleDelete = {handleDelete}/>
        </div>
      );
}

 
export default Home;

Card.js

const Card = ({animals, handleDelete}) => {
    // const animals = props.animals;

    return (  
        <div className = "col-3">
        {animals.map((animal) => (
            <div className = "card" key = {animal.id}>
            <img
                src = {animal.image_link}
                alt = {animal.latin_name}
                className = "card-img-top"
            />
            <div className = "card-body">
                <h3 className = "card-title">{animal.name}</h3>
                <p>Habitat: {animal.habitat}</p>
                <button onClick = {() => handleDelete(animal.id)}>Delete Animal</button>
            </div>
        </div>
            ))}
    </div>
    );
}
 
export default Card;

App.js

import Navbar from './navbar';
import Home from './Home';

function App() {

  return (
    <section id = "app">
      <div className = "container">
      <Navbar />
      <div className = "row">
        <Home />
      </div>
      </div>
    </section>
  );
}

export default App;

Скриншот того, что я вижу сейчас скриншот (Мне также было интересно, как исправить элементы, идущие вниз, а не рядом, но сначала я хотел исправить кнопку добавления)

Дайте мне знать, если есть что-то еще, что я должен добавить, любая помощь приветствуется, спасибо!