I'm having a little trouble understanding this error: Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

I've tried parsing the data to see if anything would show but it still displays blank any help would be appreciated

    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