REACT JS – Eventualy my addeventlistener works, eventually not

What’s going on in my code? Basically, I’m trying to use try/catch on my submit button, but there’s no response, unless I “randomly” change the code and ctrl+z, which is weird. Can you guys help me?

function Search() {
    const apiKey = '34a37e23f7b13413d266dd15e21f63f8'
    const apiUrl = "https://api.openweathermap.org/data/2.5/weather?units=metric&q="
   
    const searchBox = document.querySelector('.search input')
    const searchBtn = document.querySelector('.search button')
    const weatherIcon = document.querySelector(".weather-icon")  
    
  
        
    async function checkWeather(cidade) {
        const response = await fetch(apiUrl + encodeURIComponent(cidade) + "&appid=" + apiKey)
        const data = await response.json()
        
        document.querySelector('.cidade').innerHTML = data.name
        document.querySelector('.temperatura').innerHTML = Math.round(data.main.temp) + "  °C"
        document.querySelector('.umidade').innerHTML = data.main.humidity + "%"
        document.querySelector('.vento').innerHTML = Math.round(data.wind.speed) + "km/h"
        console.log(data)

        if (data.weather[0].main == 'Clouds') {
            weatherIcon.src = cloud
        } else if (data.weather[0].main == 'Clear') {
            weatherIcon.src = sun
        } else if (data.weather[0].main == 'Rain') {
            weatherIcon.src = rain
        } else if (data.weather[0].main == 'Drizzle') {
            weatherIcon.src = drizzle
        }
        document.querySelector('.weather').style.display = "block"
    }
        
try{
    searchBtn.addEventListener("click", ()=>{
        checkWeather(searchBox.value)
        console.log('funfou')})    
} catch(e) {

}
}
export default Search

I tried changing it to outside try catch block, but react said it couldnt work