how do i fix the follwoin error TypeError: Cannot destructure property 'userInfo' of 'useSelector(...)' as it is undefined.
    at Header (http://localhost:3000/src/components/Header.jsx?t=1684789976484:26:5)
    at renderWithHooks (http://localhost:3000/node_modules/.vite/deps/chunk-QJV3R4PZ.js?v=ed509961:12171:26)
    at mountIndeterminateComponent (http://localhost:3000/node_modules/.vite/deps/chunk-QJV3R4PZ.js?v=ed509961:14921:21)
    at beginWork (http://localhost:3000/node_modules/.vite/deps/chunk-QJV3R4PZ.js?v=ed509961:15902:22)
    at beginWork$1 (http://localhost:3000/node_modules/.vite/deps/chunk-QJV3R4PZ.js?v=ed509961:19749:22)
    at performUnitOfWork (http://localhost:3000/node_modules/.vite/deps/chunk-QJV3R4PZ.js?v=ed509961:19194:20)
    at workLoopSync (http://localhost:3000/node_modules/.vite/deps/chunk-QJV3R4PZ.js?v=ed509961:19133:13)
    at renderRootSync (http://localhost:3000/node_modules/.vite/deps/chunk-QJV3R4PZ.js?v=ed509961:19112:15)
    at recoverFromConcurrentError (http://localhost:3000/node_modules/.vite/deps/chunk-QJV3R4PZ.js?v=ed509961:18732:28)
    at performConcurrentWorkOnRoot (http://localhost:3000/node_modules/.vite/deps/chunk-QJV3R4PZ.js?v=ed509961:18680:30)
based on the following components /* eslint-disable no-unused-vars */
import { Navbar, Nav, Container, NavDropdown, Badge } from 'react-bootstrap';
import { FaSignInAlt, FaSignOutAlt } from 'react-icons/fa';
import { LinkContainer } from 'react-router-bootstrap';
import { useSelector, useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { logout } from '../slices/authSlice';

const Header = () => {
  const { userInfo, status, error } = useSelector((state) => state.user);

  const dispatch = useDispatch();
  const navigate = useNavigate();

  const logoutHandler = async () => {
    try {
      dispatch(logout());
      navigate('/login');
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <header>
      <Navbar bg='dark' variant='dark' expand='lg' collapseOnSelect>
        <Container>
          <LinkContainer to='/'>
            <Navbar.Brand>French Game</Navbar.Brand>
          </LinkContainer>
          <Navbar.Toggle aria-controls='basic-navbar-nav' />
          <Navbar.Collapse id='basic-navbar-nav'>
            <Nav className='ms-auto'>
              {userInfo ? (
                <>
                  <NavDropdown title={userInfo.name} id='username'>
                    <LinkContainer to='/profile'>
                      <NavDropdown.Item>Profile</NavDropdown.Item>
                    </LinkContainer>
                    <NavDropdown.Item onClick={logoutHandler}>
                      Logout
                    </NavDropdown.Item>
                  </NavDropdown>
                </>
              ) : (
                <>
                  <LinkContainer to='/login'>
                    <Nav.Link>
                      <FaSignInAlt /> Sign In
                    </Nav.Link>
                  </LinkContainer>
                  <LinkContainer to='/register'>
                    <Nav.Link>
                      <FaSignOutAlt /> Sign Up
                    </Nav.Link>
                  </LinkContainer>
                </>
              )}
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </header>
  );
};

export default Header;
/* eslint-disable no-unused-vars */
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import axios from '../api/api';

const USERS_URL = '/auth/email';

export const login = createAsyncThunk('user/login', async (data) => {
  const response = await axios.post(`${USERS_URL}/login`, data);
  return response.data;
});

export const register = createAsyncThunk('user/register', async (data) => {
  const response = await axios.post(`${USERS_URL}/register`, data);
  return response.data;
});

export const updateUser = createAsyncThunk('user/update', async (data) => {
  const response = await axios.put('auth/me', data);
  return response.data;
});

const initialState = {
  userInfo: localStorage.getItem('userInfo')
    ? JSON.parse(localStorage.getItem('userInfo'))
    : null,
  status: 'idle',
  error: null,
};

const userSlice = createSlice({
  name: 'user',
  initialState,
  extraReducers: (builder) => {
    builder
      .addCase(login.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(login.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.userInfo = action.payload;
        localStorage.setItem('userInfo', JSON.stringify(action.payload));
      })
      .addCase(login.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      })
      .addCase(register.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(register.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.userInfo = action.payload;
        localStorage.setItem('userInfo', JSON.stringify(action.payload));
      })
      .addCase(register.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      })
      .addCase(updateUser.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(updateUser.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.userInfo = action.payload;
        localStorage.setItem('userInfo', JSON.stringify(action.payload));
      })
      .addCase(updateUser.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      })
      .addDefaultCase((state) => {});
  },
});

export default userSlice.reducer;

// import { apiSlice } from './apiSlice';
// const USERS_URL = '/auth/email';

// export const userApiSlice = apiSlice.injectEndpoints({
//   endpoints: (builder) => ({
//     login: builder.mutation({
//       query: (data) => ({
//         url: `${USERS_URL}/login`,
//         method: 'POST',
//         body: data,
//       }),
//     }),
//     register: builder.mutation({
//       query: (data) => ({
//         url: `${USERS_URL}/register`,
//         method: 'POST',
//         body: data,
//       }),
//     }),
//     updateUser: builder.mutation({
//       query: (data) => ({
//         url: 'auth/me',
//         method: 'PUT',
//         body: data,
//       }),
//     }),
//   }),
// });

// export const { useLoginMutation, useRegisterMutation, useUpdateUserMutation } =
//   userApiSlice;