How to set body in request to update record using RTK query?

In EditEmployee component after editing when I click on "Save Changes" button the updateEmployee method for some reason does not send body in PUT request.

What am I doing wrong here?

EditEmployee.js

import React, { useState } from 'react';
import { useUpdateEmployeeMutation } from "./employeesApiSlice";
function EditEmployee(props) {
const [updateEmployee] = useUpdateEmployeeMutation();
const [updatedFirstName, setUpdatedFirstName] = useState(props.employee.firstName);
const [updatedLastName, setUpdatedLastName] = useState(props.employee.lastName);
const [updatedPosition, setUpdatedPosition] = useState(props.employee.position);
const jobPositions = ['Labor', 'Worker', 'Supervisor', 'Manager', 'HR', 'Director', 'CEO']
.map((jobPosition, i) => (
<Col key={i}>
<Form.Group className="mb-3" controlId={jobPosition.toLowerCase()}>
<Form.Check
type="radio"
name="position"
label={jobPosition}
value={jobPosition.toLowerCase()}
defaultChecked={props.employee.position.toLowerCase() === jobPosition.toLowerCase()}
onChange={e => setUpdatedPosition(e.target.value)}
/>
</Form.Group>
</Col>
));
function handleSaveChanges() {
const employee = {
firstName: updatedFirstName,
lastName: updatedLastName,
position: updatedPosition
}
updateEmployee(props.employee.id, employee)
}
return (
<>
<Form>
<Form.Group className="mb-3" controlId="formFirstName">
<Form.Label>First Name</Form.Label>
<Form.Control type="text" defaultValue={updatedFirstName} onChange={e => setUpdatedFirstName(e.target.value)} />
</Form.Group>
<Form.Group className="mb-3" controlId="formLastName">
<Form.Label>Last Name</Form.Label>
<Form.Control type="text" defaultValue={updatedLastName} onChange={e => setUpdatedLastName(e.target.value)} />
</Form.Group>
<Container>
<Row>
{jobPositions}
</Row>
</Container>
</Form>
<Button variant="success" onClick={() => handleSaveChanges()}>
Save Changes
</Button>
</>
);
}
export default EditEmployee;

employeeApiSlice.js

import { apiSlice } from "../../app/api/apiSlice";
export const employeesApiSlice = apiSlice.injectEndpoints({
tagTypes: ['Employees'],
endpoints: (builder) => ({
getEmployees: builder.query({
query: () => ({
url:'/employee'
}),
providesTags:['Employees'],
keepUnusedDataFor: 2
}),
updateEmployee: builder.mutation({
query: (id, employee) => ({
url: `/employee/${id}`,
method: 'PUT',
body: employee
}),
invalidatesTags: ['Employees']
}),
addEmployee: builder.mutation({
query: (employee) => ({
url: `/employee`,
method: 'POST',
body: employee
}),
invalidatesTags: ['Employees']
})
}),
});
export const {
useGetEmployeesQuery,
useUpdateEmployeeMutation,
useAddEmployeeMutation
} = employeesApiSlice;

The query callback of an endpoint takes a single argument.

See: Mutation Endpoint Definition

> export type MutationDefinition<
> QueryArg,
> BaseQuery extends BaseQueryFn,
> TagTypes extends string,
> ResultType,
> ReducerPath extends string = string,
> Context = Record<string, any>
> > = {
> query(arg: QueryArg): BaseQueryArg<BaseQuery> <---- Single Argument
>
> /* either query or queryFn can be present, but not both simultaneously /
> queryFn(
> arg: QueryArg,
> api: BaseQueryApi,
> extraOptions: BaseQueryExtraOptions<BaseQuery>,
> baseQuery: (arg: Parameters<BaseQuery>[0]) => ReturnType<BaseQuery>
> ): MaybePromise<QueryReturnValue<ResultType, BaseQueryError<BaseQuery>>>
>
> / transformResponse only available with query, not queryFn /
> transformResponse?(
> baseQueryReturnValue: BaseQueryResult<BaseQuery>,
> meta: BaseQueryMeta<BaseQuery>,
> arg: QueryArg
> ): ResultType | Promise<ResultType>
>
> / transformErrorResponse only available with query, not queryFn */
> transformErrorResponse?(
> baseQueryReturnValue: BaseQueryError<BaseQuery>,
> meta: BaseQueryMeta<BaseQuery>,
> arg: QueryArg
> ): unknown
>
> extraOptions?: BaseQueryExtraOptions<BaseQuery>
>
> invalidatesTags?: ResultDescription<TagTypes, ResultType, QueryArg>
>
> onQueryStarted?(
> arg: QueryArg,
> {
> dispatch,
> getState,
> extra,
> requestId,
> queryFulfilled,
> getCacheEntry,
> }: MutationLifecycleApi
> ): Promise<void>
>
> onCacheEntryAdded?(
> arg: QueryArg,
> {
> dispatch,
> getState,
> extra,
> requestId,
> cacheEntryRemoved,
> cacheDataLoaded,
> getCacheEntry,
> }: MutationCacheLifecycleApi
> ): Promise<void>
> }

If you need to pass multiple values they should be packed in an object.

Example:

updateEmployee: builder.mutation({
query: ({ id, employee }) => ({
url: `/employee/${id}`,
method: 'PUT',
body: employee
}),
invalidatesTags: ['Employees']
}),

function handleSaveChanges() {
const employee = {
firstName: updatedFirstName,
lastName: updatedLastName,
position: updatedPosition
};
updateEmployee({ id: props.employee.id, employee });
}