Aplikacja React komponent

Witam, bawię się w reakcie swoją przygodą z programowaniem zacząłem 6 miesięcy temu, dopiero poznaję sobie biblioteki.
Mam projekt reactowy, w komponencie first.js

https://github.com/actionjacks/4fun-React/blob/master/src/components/First.js

po naciśnięciu buttona funkcja pobiera dane z API do komponentu CardImage w fortmie probsa przekazuje url do obrazka
https://github.com/actionjacks/4fun-React/blob/master/src/components/CardImage.js
Problem że muszę nacisnąć button dwa razy żeby komponent CardImage dodał pierwszy obrazek Jak by ktoś mógł mi pomóc i podpowiedzieć co napisałem źle bardzo mi to pomoże w nauce pozdrawiam.

Druga linia nie przyniesie efektu, bo zmiana obiektu state nie jest odnotowywana.

  this.setState({ count: this.state.count + 1 });
  this.state.url.push(cardImage);

Metoda push mutuje obiekt, ale zamiast niej możesz wykorzystać np. metodę concat, zwracającą nową instancję.

 this.setState({ count: this.state.count + 1, url: this.state.url.concat(cardImage) });

Bo zmieniasz ręcznie stan

 this.state.url.push(cardImage);

w ten sposób React nie widzi, że go zmieniłeś. A możesz połączyć to z poprzednią linijką (tylko wtedy użyjesz concat zamiast push - to znaczy nie będziesz modyfikować istniejącej tablicy, tylko stworzysz nową tablicę, która będzie zawierała elementy z tej, która jest w this.state.url oraz z tego nowego elementu:

    this.setState({ 
       count: this.state.count + 1,
       url: this.state.url.concat(cardImage),
    });

albo z callbackiem (zobacz też: https://reactjs.org/docs/faq-state.html#why-is-setstate-giving-me-the-wrong-value )

    this.setState(state => ({ 
       count: state.count + 1,
       url: state.url.concat(cardImage),
    }));

Dzięki za pomoc, ostatnie pytanie w tym temacie. Hooki w Reakcie zamieniają komponenty klasowe w funkcyjne upraszczając kod niesamowicie, bardzo mi się podoba nowa składnia. Przebudowałem kod pod użycie Hooków. Pytanie moje jest czy kod jest względnie dobrze napisany, interesują mnie dobre praktyki oraz co tu można poprawić? Pozdrawiam

import React, { useState, useEffect } from "react";
import CardImage from "./CardImage";
import "./First.css";
import Button from "@material-ui/core/Button";

export default function First() {
  const [count, setCount] = useState(0);
  const [url, setUrl] = useState([]);

  const fetchData = () => {
    const api = "https://db.ygoprodeck.com/api/v7/cardinfo.php";
    fetch(api)
      .then((response) => response.json())
      .then((data) => {
        const cardImage = data.data[count].card_images[0].image_url;
        setCount(count + 1);
        setUrl(url.concat(cardImage));
      });
  };
  return (
    <>
      <h1>Get cards from Yu-Gi-Oh! Trading Card Game</h1>
      <Button onClick={() => fetchData()} variant="contained" color="primary">
        Get Card!
      </Button>
      <div className="card__container">
        <CardImage cardImg={url} />
      </div>
    </>
  );
}