Redux toolkit RTK Query: TypeError: Cannot read properties of undefined (reading 'replace')

Question

On page load, I got an error saying "TypeError: Cannot read properties of undefined (reading 'replace')" along with "executeQuery/rejected". No data is loaded.

This occurs when I open the page by clicking a side-bar navigation menu (via useNavigation() of react-router-dom).

Reloading the page successfully fetches the data with fulfilled status.

Any advice??

Here is my code.

---

userSlice.ts

export const userApi = createApi({
  reducerPath: 'user',
  baseQuery: fetchBaseQuery({
    baseUrl: '',
  }),
  tagTypes: ['Users'],
  endpoints: (builder) => ({
    getUsers: builder.query<User[], void>({
      async queryFn() {
        const { data } = await api.getUsers();
        return { data };
      },
      providesTags: ['Users'],
    }),
    createUser: builder.mutation<User, User>({
      async queryFn(user) {
        const { data } = await api.createUser(user);
        return { data };
      },
      invalidatesTags: ['Users'],
    }),
    updateUser: builder.mutation<User, User>({
      async queryFn(user) {
        const { data } = await api.updateUser(user.id, user);
        return { data };
      },
      invalidatesTags: ['Users'],
    }),
  }),
});

export const { useGetUsersQuery, useCreateUserMutation, useUpdateUserMutation } = userApi;

---

User.tsx

export default function UserManagement() {
  const { data: users = [], isLoading } = useGetUsersQuery();

  return (
    <div>{isLoading ? <Loader /> : users.map((user) => <div key={user.id}>{user.id}</div>)}</div>
  );
}