My API request works but I can't access the content

Question

I made a API request:

const [animes, setAnimes] = useState([]);

useEffect(() => {
    axios
        .get("https://api.jikan.moe/v4/anime/38000/characters")
        .then((response) => {
            setAnimes(response.data);
        })
        .catch((err) => {
            console.log(err);
        });
}, []);

when I do console.log(animes) I receive the data with a array of 76 items. But, when I do:

<div className="container">
                {!!animes.length &&
                    animes?.slice(0, 9).map((anime, index) => {
                        return (
                            <img
                                key={index}
                                src={anime.image_url}
                                alt={anime.name}
                            />
                        );
                    })}
            </div>

I can't get the img and the alt. The console.log result is a object with a array inside. But if I use "setAnimes(response.data.data)" I receive just the array and even with this I can't get the content.

If I console.log(setAnimes) I receive this:

function dispatchSetState(fiber, queue, action) {
{
if (typeof arguments[3] === 'function') {
  error("State updates from the useState() and useReducer() Hooks don't support the " + 
  'second callback argument. To execute a side effect after ' + 'rendering, declare it 
  in the component body with useEffect().');
  }
 }

 var lane = requestUpdateLane(fiber);
 var update = {
 lane: lane,
 action: action,
 hasEagerState: false,
 eagerState: null,
 next: null
 };

What I'm doing wrong?

Answer 1

That's because the anime object doesn't contain image_url or name properties.

It just contains these properties

1. character: Object
2. role: string
3. voice_actors: Array

Check console.

https://codesandbox.io/s/tender-hopper-ytxkvc