initially its showing output but on search giving this error-"Unhandled Rejection (TypeError): Cannot read property 'lon' of und
import React, { useState, useEffect } from 'react' const First = () => { const [city, setcity] = useState(null); const [search, setsearch] = useState("mumbai"); const [longitude, setlongitude] = useState(""); useEffect(() => { const fetchapi = async () => { const url = `http://api.openweathermap.org/data/2.5/weather?q=${search}&units=metric&appid={api_key}`; const response = await fetch(url); const resjson = await response.json(); console.log(resjson.coord.lon); setlongitude(resjson.coord.lon); setcity(resjson.main); } fetchapi(); }, [search]); return ( <div className="first"> <div className="App"> <h1>WEATHER APP 1</h1> <input type="search" className="input" value={search} onChange={(event) => { setsearch(event.target.value) }} /> {!city ? (<p>no data found</p>) : ( <> <div> <h2 >{search}</h2> <h3 >{city.temp}° cel</h3> <h3 >Min : {city.temp_min}° cel | Max : {city.temp_max}° cel</h3> <h4>longitude : {longitude}</h4> </div> </> )} </div> </div> ) } export default First