If you want to access a people Id directly then you need to remove map

Here is sandbox

import {useState, useEffect} from 'react';


const getAnimes = async () => {
  try {
    const response = await fetch('https://api.jikan.moe/v4/people/5579');
    const animes = await response.json();
    return animes;
  } catch (error) {
    console.error(error);
  }
};

function App() {
  const [animes, setAnimes] = useState([]);

  const fetchAnimes = async () => {
    try {
      const data = await getAnimes();
      setAnimes(data.data);
    } catch (error) {}
  };

  useEffect(() => {
    fetchAnimes();
  }, []);

  return (
    // <React.Fragment>
    <>
      <header>
        <h1>Search Anime</h1>
      </header>
      <main>
        <article className="countries">
            <div key={animes.mal_id}>
              <h2>{animes.name}</h2>
              { console.log(animes) }
            </div>
        </article>
      </main>
    </>
    // </React.Fragment>
  );
}

export default App

If you need to support both The https://api.jikan.moe/v4/genres/anime search and
specific character like https://api.jikan.moe/v4/people/5579 Then on the response time you can check whether response you get is an array or not, If its not you can convert it to an array so your

{animes.map((anime) => (
        <div key={anime.mal_id}>
          <h2>{anime.name}</h2>
        </div>
      ))}

does not get breaks, here how you can do that

    const getAnimes = async () => {
  try {
    const response = await fetch('https://api.jikan.moe/v4/people/5579');
    let animes = await response.json();
    if (!Array.isArray(animes)) {
      animes = [animes]
    }
    return animes;
  } catch (error) {
    console.error(error);
  }
};

but though it is not a good practice to do in that way. You should have a page which lists all animes and when a user click on a single anime you should have a separate page for it, it will help to have a more deterministic approach.

You are trying to map an object not an array which is not possible. If you want to get all people information, you should remove the id from api call then it will work fine.

const response = await fetch("https://api.jikan.moe/v4/people");

Here is the working version without id https://codesandbox.io/embed/thirsty-feistel-yjs6my?fontsize=14&hidenavigation=1&theme=dark.

Instead if you want to use single people object, just remove the map part