Tengo un pequeño problema para entender este error: Uncaught (en promesa) SyntaxError: JSON.parse: carácter inesperado en la línea 1 columna 1 de los datos JSON

Intenté analizar los datos para ver si se mostraba algo, pero aún se muestra en blanco. Cualquier ayuda sería apreciada.

 import React, { useState} from 'react'; function Drinks () { //if nothing is entered it defaults to Blue Margarita const[drinks, setDrinks] = useState("Blue Margarita"); function handleChange(e){ setDrinks(e.target.value); } // 'margarita' function getDrinks(){ // www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita fetch(`www.thecocktaildb.com/api/json/v1/1/search.php?s=${drinks}`) .then((res)=> res.json()) .then((data)=>{ setDrinks(data) console.log(data); }) // .catch(()=> { // console.log("err") // }); }; return ( <article> <div> <input type="String"placeholder="Enter a drink" onChange={handleChange}/> <button className="btn"onClick={getDrinks}>getDrink</button> </div> <h1>{getDrinks.strDrink}</h1> <h2>{getDrinks.idDrink}</h2> </article> ) } export default Drinks