как исчезнуть в фоновом изображении

Question

Когда я нажимаю на кнопку, я меняю фон. Однако я хочу, чтобы фон исчезал, а не появлялся.

В моем css у меня есть:

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

В реакции у меня это (упрощено, чтобы разместить меньше кода)

const [bgImg, setbgImg] = useState(flag1);

  <header
    className="App-header"
    style={{ backgroundImage: `url(${bgImg})`, animation: "fadein 1s" }}
  >

<button
  type="button"
  className="btn btn-cntry"
  onClick={() => {
    func1();
    func2();
  }}
>

  function func2() {
    setbgImg(bgImg === flag1 ? flag2 : flag1);
  }

Анимация работает только при первой загрузке страницы, но не после нажатия кнопки