React Hook useState doesnt work when I try passing in a JSON object fetched from an API request

Error:

Cannot read properties of undefined (reading 'ranking')
TypeError: Cannot read properties of undefined (reading 'ranking')
    at MovieCard (http://localhost:3000/static/js/bundle.js:250:44)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:21333:22)
    at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:24619:17)
    at beginWork (http://localhost:3000/static/js/bundle.js:25915:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:10925:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:10969:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:11026:35)
    at beginWork$1 (http://localhost:3000/static/js/bundle.js:30900:11)
    at performUnitOfWork (http://localhost:3000/static/js/bundle.js:30147:16)
    at workLoopSync (http://localhost:3000/static/js/bundle.js:30070:9)

My app.jsx

import React, { useEffect, useState} from "react";
// import axios from "axios";
import "./App.css";
import SearchIcon from './search.svg';
import MovieCard from "./MovieCard";



const API_URL = 'https://anime-db.p.rapidapi.com/anime?page=1&size=10';
const options = {
	method: 'GET',
	headers: {
		'X-RapidAPI-Key': '86f93f3665msh3f8b81058a26p1a3effjsnfgg0c6ff789ce',
		'X-RapidAPI-Host': 'anime-db.p.rapidapi.com'
	}
};


const App = () => {
  const [anime,setAnime] = useState([]);
  const searchAnime =  async (title)=>{
  const response = await fetch(`${API_URL}&search=${title}`,options);
  const data =await response.json();
  console.log(data);
  data.then(function(res){
    setAnime(res.data)
  })
  }
  
  useEffect(()=>{
    searchAnime("shigatsu");
  },[])

  return (<div className="app">
    <h1>
      Annie-Plex
    </h1>
    <div className="search">
      <input placeholder="Search for Anime" value = "" onChange={()=>{}}/>
      <img
      src={SearchIcon}
      alt="Search"
      onClick={()=>{}}
      />
    </div>
    <div className="container">
      <MovieCard
      M1 = {anime[0]}/>           //this part gives the error

    </div>
  </div>);
};

export default App;

my moviecard.js

import React from 'react'

const MovieCard = ({M1}) => {
  return (
    <div className="movie">
    <div>
      <p>Current Ranking: {M1.ranking}</p>
    </div>
    <div>
      <img src={M1.image} alt={M1.title} />
    </div>
    <div>
      <span>{M1.type}</span>
      <h3>{M1.title}</h3>
    </div>
  </div>


  )
}

export default MovieCard    

I was expecting the first card of the request to be loaded up

Don't display the component until the request has been completed and there actually is a first element in the array.

{anime[0] && <MovieCard M1={anime[0]}/>}

Also, don't use .then on a value that has already been awaited (it's not a Promise). If the returned JSON is an array, then you should simply call setAnime(data);.