React not updating state on fetching API data by hooks

I am trying to implement api calls via hooks, but I don't know why the state is not updating . Could someone look at this and tell me the reason:

import React,{useState} from 'react';

function Weather(){
    var [weat,setWeat]=useState({city:'',report:[]})
    var UpdateCity = event =>{
        setWeat({...weat,city:event.target.value});
    }
    var UpdateReport = event =>{
        var addr="http://api.openweathermap.org/data/2.5/weather?q="+weat.city+"&appid=04e"
        console.log(addr);
        fetch(addr)
        .then(res=>res.json())
        .then(res=>{
            setWeat({...weat,report:res});
        });
        
    }
    return(
        <>
            <h1>Welcome to my weather App</h1>
            <h3>Please enter your city</h3>
            <input type='text' onChange={UpdateCity} placeholder='Enter your City'></input>
            <input type='submit' onClick={UpdateReport}></input>
        </>
    )
}

export default Weather;

You are not passing a key for authentication, so its basically going to error, since you doesn't handle error cases thats why you are not seeing it

So you need to update as follows and pass the key on the url to get the data.

Apart from that code looks fine

var UpdateReport = event =>{
        var addr="http://api.openweathermap.org/data/2.5/weather?q="+weat.city+"&appid=04e"
        console.log(addr);
        fetch(addr)
        .then(res=>res.json())
        .then(res=>{
            setWeat({...weat,report:res});
        })
        .catch(error => {
          console.log(error)
        })

    }

Update

So the problem was not updating the state, there was a cors issue. See the working codesandbox with a sample api here,

You are just missing the s in your API URL. I believe calls only work through HTTPS

https://api.openweathermap.org/.....

Also, as @DILEEP THOMAS mention, its better to add catch block that will help you know why fetch is not working properly.

.catch(err => console.log(err.message))

I just copied your code in local and added my own API Key and works out of the box. When testing the app have the chrome console openned and check for the error fetching the data, to see if you have an error on the request.

Also your query might be working and you don't see your component re-render as you are not using weat object inside the return, please add some log before the return just with this:

   console.log("weat.city: ", weat.city, " weat.report: ", weat.report)
   return (
      . . . 
   )

So now you will see if the state changes or not.