React having problems with rendering two mapped arrays to the page

Very new react user here. I am making a react app that displays albums from the spotify API. The problem is when you hit the search genre button it works and then when you hit the search new music button it works BUT when you try to use the search genre button again nothing happens. My code is probably very rough but here it is.

import { useEffect, useState } from "react";
import "./App.css";

const CLIENT_ID = "2a65aa062a2948b09f7af884b5447c3d";
const CLIENT_SECRET = "e93fd764678a4ebe97accd512e302219";

function App() {
  const [accessToken, setAcessToken] = useState("");
  const [albums, setAlbums] = useState([]);
  const [genreAlbums, setGenreAlbums] = useState([]);
  const [searchInput, setSearchInput] = useState("");

  useEffect(() => {
    // API Acess Token
    var authParameters = {
      method: "POST",
      headers: {
        "content-type": "application/x-www-form-urlencoded",
      },
      body:
        "grant_type=client_credentials&client_id=" +
        CLIENT_ID +
        "&client_secret=" +
        CLIENT_SECRET,
    };
    fetch("https://accounts.spotify.com/api/token", authParameters)
      .then((result) => result.json())
      .then((data) => setAcessToken(data.access_token));
  }, []);

  // Get new music
  async function search() {
    var newAlbums = await fetch(
      "https://api.spotify.com/v1/browse/new-releases",
      {
        headers: {
          Authorization: "Bearer " + accessToken,
        },
      }
    )
      .then((response) => response.json())
      .then((data) => setAlbums(data.albums.items));
  }

  // Get specific genre
  async function searchGenre() {
    var newAlbumsGenre = await fetch(
      'https://api.spotify.com/v1/search?type=track&q=genre:"' +
        searchInput +
        '"&limit=50',
      {
        headers: {
          Authorization: "Bearer " + accessToken,
        },
      }
    )
      .then((response) => response.json())
      .then((data) => setGenreAlbums(data.tracks.items));
    console.log(genreAlbums);
  }

  return (
    <div className="App">
      <div>
        <button className="button" type="button" onClick={search}>
          Search for new music!
        </button>
        <form className="form">
          <input
            type="text"
            id="genre"
            autoComplete="off"
            onChange={(event) => setSearchInput(event.target.value)}
          />
        </form>
        <button className="genreButton" type="button" onClick={searchGenre}>
          Search Genre
        </button>
      </div>

      <div>
        {albums.map((album, i) => {
          return (
            <div className="card" key={i}>
              <img src={album.images[0].url} alt="alt text" />
              <div className="container">
                <h4>
                  <b>{album.name}</b>
                </h4>
                <p>{album.artists[0].name}</p>
              </div>
            </div>
          );
        })}
      </div>

      <div>
        {genreAlbums.map((track, i) => {
          return (
            <div className="card" key={i}>
              <img src={track.album.images[0].url} alt="alt text" />
              <div className="container">
                <h4>
                  <b>{track.name}</b>
                </h4>
                <p>{track.artists[0].name}</p>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default App;

I have tried assigning keys to each of the mapped returns but nothing worked.