How to add more then two reducers in store Redux Toolkit

I want to add two reducers in my store:

1. authReducer

   AND

2. cartReducer

HEARS MY CODE SO FAR INSIDE MY (store.js):

import { configureStore } from "@reduxjs/toolkit";
import { cartReducer } from "./cartSlice";

import storage from "redux-persist/lib/storage";
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from "redux-persist";
import authReducer from "./authSlice";

const persistConfig = {
  key: "root",
  storage,
};

const persistedReducer = persistReducer(persistConfig, cartReducer);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
});

export const persistor = persistStore(store);

But I have already stored my cartReducer inside my persistReducer which I imported from redux-persist and stored in my store:

HERE IS THE CODE AGAIN:

1. My Import:

import { cartReducer } from "./cartSlice";

2. My Persist Reducer in which I added my cartReducer:

const persistedReducer = persistReducer(persistConfig, cartReducer);

3. And my store in which I put my persistedReducer in the reducer:

   export const store = configureStore({
      reducer: persistedReducer,
      middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware({
          serializableCheck: {
            ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
          },
        }),
    });
   

This works fine for my cartReducer but I also want to put my authReducer inside my store too:

 import authReducer from "./authSlice";
     

I want to put it exactly where I put my persistedReducer inside the reducer:

export const store = configureStore({
          reducer: persistedReducer,
          middleware: (getDefaultMiddleware) =>
            getDefaultMiddleware({
              serializableCheck: {
                ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
              },
            }),
        });

1. I HAVE TRIED: I have tried putting my authReducer inside the persistReducer with cartReducer:

   const persistedReducer = persistReducer(persistConfig, cartReducer, authReducer);

THEN store everything together

export const store = configureStore({
   reducer: persistedReducer,
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware({
       serializableCheck: {
         ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
       },
     }),
 });

This breaks my code.

2. I HAVE TRIED:

I also tried doing this:

const persistedReducer = persistReducer(persistConfig, cartReducer);

export const store = configureStore({
  reducer: { auth: authReducer, persistedReducer },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
});

My authReducer works but wait my cartReducer(In with I stored inside the persistedReducer) stops working

I am stilling learning how to use Redux toolkit and I am not sure how to solve this. Please help