Im building an app where I want to take api data from https://www.thecocktaildb.com to allow for users to search for a cocktail drink and it will fetch data from the api source to display the name of the drink on the page. I don't know why its giving me an error of "Uncaught TypeError: drinkList.drinks is undefined" because if you look at the screenshot I included of what the JSON data looks like, it should be correct?

This is my 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 (e.g. margarita)"
          onChange={handleChangeDrink}
        />
        <button onClick={getDrink}>Get a Drink Recipe</button>
        <Drinks drinkList={drinkName} />
      </section>
    </main>
  );
}

export default Home;

and this is my Drinks.js component

import React from "react";

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

export default Drinks;

This is a screenshot of the JSON data: