Why do I get "map is not function"?

Question

I want to loop over this object and create a select with it.

{
  "Comedy": "Comédie",
  "Drama": "Drame",
  "Crime": "Crime",
  "Horror": "Horreur",
  "Anime": "Anime",
}

so I did :

  <select name="genre">
              {console.log(genres)}
              {genres.map((genre) => {
                return <option name={genre}></option>;
              })}
  </select>

but react return me : "TypeError: genres.map is not a function"

This is how I get my data and set my states:

const Show = () => {
  const [shows, setShows] = useState([]);
  const [genres, setGenres] = useState([]);

  const fetchShow = () => {
    let data = api.shows(filter);
    return data;
  };

  const query = useQuery("show-page", fetchShow, {
    onSuccess: (data) => setShows(data.data.shows),
  });

  const queryGenre = useQuery("genres", api.genres, {
    onSuccess: (data) => setGenres(data.data.genres),
  });

  const [filter, setFilter] = useState([]);

 {query.isSuccess && (
          <>
            <select name="genre">
              {console.log(genres)}
              {genres.map((genre) => {
                return <option name={genre}></option>;
              })}
            </select>
          // other code
          </>
)}

I don't understand why I can't loop over this object ?