Based on the below userApiSlice * 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; how should i update the following ProfileScreen Component /* eslint-disable no-unused-vars */
import { useState, useEffect } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Form, Button } from 'react-bootstrap';
import { useDispatch, useSelector } from 'react-redux';
import FormContainer from '../components/FormContainer';
import { toast } from 'react-toastify';
import Loader from '../components/Loader';
import { useUpdateUserMutation } from '../slices/usersApiSlice';
import { setCredentials } from '../slices/authSlice';

const ProfileScreen = () => {
  const [email, setEmail] = useState('');
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');

  const dispatch = useDispatch();

  const { userInfo } = useSelector((state) => state.auth);

  const [updateProfile, { isLoading }] = useUpdateUserMutation();

  useEffect(() => {
    setFirstName(userInfo.firstName);
    setLastName(userInfo.lastName);
    setEmail(userInfo.email);
  }, [userInfo.email, userInfo.firstName, userInfo.lastName]);

  const submitHandler = async (e) => {
    e.preventDefault();
    if (password !== confirmPassword) {
      toast.error('Passwords do not match');
    } else {
      try {
        const res = await updateProfile({
          _id: userInfo._id,
          firstName,
          lastName,
          email,
          password,
        }).unwrap();
        console.log(res);
        dispatch(setCredentials(res));
        toast.success('Profile updated successfully');
      } catch (err) {
        toast.error(err?.data?.message || err.error);
      }
    }
  };
  return (
    <FormContainer>
      <h1>Update Profile</h1>

      <Form onSubmit={submitHandler}>
        <Form.Group className='my-2' controlId='name'>
          <Form.Label>First Name</Form.Label>
          <Form.Control
            type='name'
            placeholder='Enter first name'
            value={name}
            onChange={(e) => setFirstName(e.target.value)}
          ></Form.Control>

          <Form.Label>Last Name</Form.Label>
          <Form.Control
            type='name'
            placeholder='Enter last name'
            value={name}
            onChange={(e) => setLastName(e.target.value)}
          ></Form.Control>
        </Form.Group>
        <Form.Group className='my-2' controlId='email'>
          <Form.Label>Email Address</Form.Label>
          <Form.Control
            type='email'
            placeholder='Enter email'
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          ></Form.Control>
        </Form.Group>
        <Form.Group className='my-2' controlId='password'>
          <Form.Label>Password</Form.Label>
          <Form.Control
            type='password'
            placeholder='Enter password'
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          ></Form.Control>
        </Form.Group>

        <Form.Group className='my-2' controlId='confirmPassword'>
          <Form.Label>Confirm Password</Form.Label>
          <Form.Control
            type='password'
            placeholder='Confirm password'
            value={confirmPassword}
            onChange={(e) => setConfirmPassword(e.target.value)}
          ></Form.Control>
        </Form.Group>

        <Button type='submit' variant='primary' className='mt-3'>
          Update
        </Button>
      </Form>
    </FormContainer>
  );
};

export default ProfileScreen;