tengo este codigo:

 import "./styles.css"; import "mvp.css"; import { useState } 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=20" ) .then((data) => { setResult(data.data.items); }) .catch((error) => { if (error.response) { alert("No results found."); } else if (error.request) { alert("No results found."); } else if (error.message) { alert("No results found."); } }); } 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">Go!</button> </div> </form> {result.map((book) => ( <a target="_blank" href={book.volumeInfo.previewLink}> <img src={book.volumeInfo.imageLinks.thumbnail} alt={book.title} /> </a> ))} </div> ); } export default function App() { return <Books />; }

Y estoy tratando de manejar algunos errores, y recibo mis mensajes de alerta como se esperaba, sin embargo, después de hacer clic en el cuadro de alerta, me redirigen a un error de tipo que dice:

book.volumeInfo.imageLinks no está definido

Estoy tratando de suprimir esto y volver a la pantalla predeterminada, pero no estoy seguro de cómo lograrlo.