Не могу отобразить данные с api openweathermap (react)

import React, {useState, useEffect} from 'react';
import './App.css';
import { Header } from 'semantic-ui-react';
import { Input } from 'semantic-ui-react';
import {useSelector, useDispatch} from "react-redux";
import {fetchWeather} from "./actions/fetchWeather";


function App() {

  const [city, setCity] = useState("");
  
  const weatherSelector = useSelector((state) => state)
  const dispatch = useDispatch();
  const getWeatherInfoAction = (city) => dispatch(fetchWeather(city));

  const getWeatherInfo = (e) => {
    e.preventDefault();
    if(city === ""){
      console.log("Enter the city")
    }else{
    getWeatherInfoAction(city);
    {console.log(weatherSelector.weatherInfo)}
    }
  }
  
let details = "";
if(weatherSelector.weatherinfo){
  details = <div className="details">
  <h4>Weather details</h4>
  <p>
  {weatherSelector.weatherInfo.main.name}
  <span>
  {weatherSelector.weatherInfo.main.country}
  </span>
  </p>
  </div>
}
  return (
    <React.Fragment>
    <div className="App">
      <Header as='h1'>Weather Test Task</Header>
    </div>
<main>
  <form onSubmit={getWeatherInfo}>
<div>
<Input loading icon='user' placeholder='Search...' onChange={e => setCity(e.target.value)} />
</div>
  </form>
{details}
</main>
</React.Fragment>
  );
}

export default App;

При вводе города в консоль приходят значения после кола апи но не могу их вывести в интерфейс под инпутом, помогите пожалуйста