Redux-Toolkit (RTK) Query Cannot read properties of undefined (reading 'reducerPath')

Question

I am trying to set up RTK Query using the code splitting technique to keep things organized as my application is complex and needs multiple endpoints to inject, it throws an error says

TypeError: Cannot read properties of undefined (reading 'reducerPath')

I have read the docs and every related problem on GitHub and stack overflow to sort out the problem but nothing works it seems like everything is correctly implemented

here is my code

Store.ts

import NavigationReducer from '@/lib/reduxSlices/NavigationSlice'
import { configureStore } from '@reduxjs/toolkit'
import { setupListeners } from '@reduxjs/toolkit/query'
import { ReduxApi } from '@/lib/reduxSlices/ReduxApi'

export const store = configureStore({
  reducer: {
    Navigation: NavigationReducer,
    [ReduxApi.reducerPath] : ReduxApi.reducer,
  },
  middleware : (getDefaultMiddleware) => getDefaultMiddleware()
    .concat(ReduxApi.middleware),
})

setupListeners(store.dispatch);

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

ReduxApi in Doc its called emptyApi

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

const baseURl = process.env.baseURL as string;

export const ReduxApi = createApi({
  reducerPath: 'ReduxApi',
  baseQuery: fetchBaseQuery({ baseUrl: baseURl }),
  endpoints: () => ({}),
})

user Api.ts

import { ReduxApi } from "./ReduxApi"

const UserApi = ReduxApi.injectEndpoints({
  endpoints: (builder) => ({
    getUserDetail: builder.query<any, void>({
      query: () => ({
        url: `/api/user/my-details`,
        method: 'POST',
      }),
      transformResponse: (res: any) => res,
    }),
  }),
  overrideExisting: false,
})

export const { useGetUserDetailQuery } = UserApi

I tried console.log(ReduxApi?.reducerPath) and it works perfectly fine, I can see in console 'ReduxApi'.