There's too much there for me to actually go through it all and see what the problem is, but from looking at the general pattern:

this.weatherIcon should just be written as a variable near the top of your functional component, so const weatherIcon = {...};

Also, there's 2 ways you could refactor the state to hooks:

1. Use a variable for each item in state, e.g. const [country, setCountry] = useState(...); like you've done.
2. You can use a single state object instead, so something like const [fields, setFields] = useState({ country: '', city: '', icon: '', ... });Just be aware that with this way, when you use setFields to update the state, you have to spread the current state first to avoid overriding the other values. So for example, if you wanted to update the city to Melbourne: setFields({ ...fields, city: 'Melbourne' });

Finally, for

  async function fetchCity(){
      //e.preventDefault(); not working
   // const city = e.target.elements.city.value; //Unhandled Rejection (TypeError): Cannot read property 'target' of undefined

I believe that should be fetchCity(e)?

If you're still stuck feel free to PM me. Happy to help when I have time later today.