Ya no puedo hacer clic en mi cuadro de texto o botón de entrada por alguna razón. Se rompió mientras estaba diseñando los elementos. Cuando cargo la página por primera vez, el atributo de enfoque automático aún funciona, pero tan pronto como intento hacer clic en el botón o volver a ingresar el cuadro de texto, no funciona.

 import React, { useState } from 'react'; import axios from 'axios'; function Header() { const [text, setText] = useState(""); function handleChange(event) { setText(event.target.value); } function handleClick() { const geoCoderURL = "http://api.openweathermap.org/geo/1.0/direct?q=" + text + "&limit=5&appid=feab629ddad64dc21d6412ebae467d79" function getCoordinates(url) { axios.get(url).then((response) => { const locationLat = response.data[0].lat; const locationLon = response.data[0].lon; console.log(locationLat, locationLon); }); } getCoordinates(geoCoderURL); } return ( <div className="header"> <h1 className="headerTitle">Five Day Forecast</h1> <input onChange={handleChange} type="text" name="name" autoFocus placeholder="Enter city name here."/> <button type="submit" onClick={handleClick}>Forecast</button> </div> ) } export default Header;