I have a API for weather app I am trying to connect it's correctly but I was test it by enter wrong values in input field I get error but can't resolve this error when enter wrong data

Error like this:

in Dashboard.js:55 Uncaught TypeError: Cannot read properties of undefined (reading '0')

and

Consider adding an error boundary to your tree to customize error handling behavior.

you can check all code from here

extra reducer

export const getDataReducer = createAsyncThunk('weatherData/getData', async (args, thunkAPI) => {
    const { rejectWithValue } = thunkAPI;
    try {
        const data = await axios.get(`https://api.worldweatheronline.com/premium/v1/weather.ashx?key=${api_key}&q=${args.country}&format=json&num_of_days=5`, {
    headers: {...}
  })
        .then(res => res.data)
        .catch(e => console.log("fetchError",e))
        console.log('new new new',data)
        return data
    } catch (error) {
        return rejectWithValue(error.message)
    }
})

Slice

[getDataReducer.pending]: (state, action) => {
            state.isLoading = true
        },
        [getDataReducer.fulfilled]: (state, action) => {
            state.isLoading = false
            state.error = false
            state.getData = action?.payload?.data
        },
        [getDataReducer.rejected]: (state, action) => {
            state.isLoading = false
            state.error = true
            state.getData = action?.payload?.data
        },

redux call

const [country, setCountry] = useState(undefined)
const {getData: APIData ,isLoading} = useSelector(state => state.getDataSlice)
    useEffect(() => {
        dispatch(getDataReducer({country}))
    },[dispatch, country])

any help, please