Estoy creando una aplicación en la que quiero tomar datos de API de https://www.thecocktaildb.com para permitir que los usuarios busquen una bebida de cóctel y obtendrá datos de la fuente de API para mostrar el nombre de la bebida en la página . No sé por qué me da un error de "TypeError no detectado: drinkList.drinks no está definido" porque si observa la captura de pantalla que incluí de cómo se ven los datos JSON, ¿debería ser correcto?

Este es mi Home.js

 import React, { useEffect, useState } from "react"; import axios from "axios"; import Drinks from "../components/Drinks"; function Home() { const [drinkName, setDrinkName] = useState(); const drinksURL = `https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${drinkName}`; function handleChangeDrink(e) { setDrinkName(e.target.value); } const getDrink = () => { axios .get(drinksURL) .then(function (response) { setDrinkName(response.data); console.log(drinksURL); }) .catch(function (error) { console.warn(error); }); }; return ( <main className="App"> <section className="drinks-section"> <input type="text" placeholder="Name of drink (eg margarita)" onChange={handleChangeDrink} /> <button onClick={getDrink}>Get a Drink Recipe</button> <Drinks drinkList={drinkName} /> </section> </main> ); } export default Home;

y este es mi componente Drinks.js

 import React from "react"; function Drinks({ drinkList }) { if (!drinkList) return <></>; return ( <section className="drinkCard"> <h1>{drinkList.drinks[0].strDrink}</h1> </section> ); } export default Drinks;

Esta es una captura de pantalla de los datos JSON: