I'm using Redux Toolkit for the first time. Data is successfully available in the console, but when i try to render data in the UI, i'm getting undefined JSON path {${weather[0].description} ${weather[0].main}} Maybe i need to check something with if() statement but i don't know how and where. My own if() solution didn't do the trick in App.js

JSON data

description: "broken clouds"
icon: "04n"
id: 803
main: "Clouds"
[[Prototype]]: Object
length: 1
[[Prototype]]: Array(0)

App.js side

import { useDispatch, useSelector } from 'react-redux';
import { fetchWeatherAction } from './redux/slices/weatherSlices';


function App() {
  const dispatch = useDispatch();
  
  useEffect(() => {
    dispatch(fetchWeatherAction('Seoul'));
  }, []);
  
  const state = useSelector(state => state.weather);
  const { loading, weather, error } = state || {};

  if(!weather){
    return null
  }

  console.log(weather);

  return (
    <div className="App">
      <header className="App-header">
      {weather.map((weather, index) => (
        <div key={index}>
          <div>{`${weather[0].description} ${weather[0].main}`}</div>
        </div>
      ))}
      </header>
    </div>
  );
}

export default App;```


Redux Toolkit side

``` import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import axios from 'axios';

 export const fetchWeatherAction = createAsyncThunk(
        'weather/fetch',
        async (payload, {rejectWithValue, getState, dispatch})=>{
            try{
                const {data} = await axios.get(`http://api.openweathermap.org/data/2.5/weather?q=${payload}&appid=7469e38d322111e34a7027db2eee39c3`);
                return data;
            }catch(error){
                if(!error?.response){
                    throw error
                }
                return rejectWithValue(error?.response?.data);
            }
        }
 );

    const weatherSlice = createSlice({
        name: 'weather',
        initialState: {},
        extraReducers: builder => {
            builder.addCase(fetchWeatherAction.pending, (state, action) => {
                state.loading = true;
            });
            builder.addCase(fetchWeatherAction.fulfilled, (state, action) => {
                state.weather = action?.payload;
                state.loading = false;
                state.error = undefined;
            });
            builder.addCase(fetchWeatherAction.rejected, (state, action) => {
                state.loading = false;
                state.weather = undefined;
                state.error = action?.payload;
            })
        },
    });

    export default weatherSlice.reducer;```