este es mi código:

 import "./styles.css"; import "mvp.css"; import { useState, useEffect } from "react"; import axios from "axios"; function Books() { const [book, setBook] = useState(""); const [result, setResult] = useState([]); const [apiKey, setApiKey] = useState( "" ); function handleChange(event) { const book = event.target.value; setBook(book); } function handleSubmit(event) { event.preventDefault(); axios .get( "https://www.googleapis.com/books/v1/volumes?q=" + book + "&key=" + apiKey + "&maxResults=100" ) .then((data) => { console.log(data); }); } return ( <div className="App"> <h1>Search For A Book</h1> <form onSubmit={handleSubmit}> <div className="form-group"> <input type="text" onChange={handleChange} className="input" placeholder="Search..." /> <button type="submit" className="btn"> Go! </button> </div> </form> </div> ); } export default function App() { return <Books />; }

¿Alguien puede averiguar por qué no puedo hacer que esto funcione? Sigo recibiendo un error de Solicitud fallida y no estoy seguro de qué está fallando. Ingresé manualmente mi URL en mi navegador de esta manera:

https://www.googleapis.com/books/v1/volumes?q=javascript&key=APIKEY

Pero cuando lo hago a través de mi código, no funciona.

Gracias por adelantado.