React Native 'PersistGate' cannot be used as a JSX component. Its instance type 'PersistGate' is not a valid JSX element

I am using @redux/toolkit with redux-persist in a react native application with TypeScript.

store.ts

    import { configureStore } from '@reduxjs/toolkit';
    import { combineReducers } from 'redux';
    import { persistReducer, persistStore } from 'redux-persist';
    import thunk from 'redux-thunk';
    import AsyncStorage from '@react-native-async-storage/async-storage';
    import calenderReducer from './reducer/calender';

    const reducers = combineReducers({
    graph: calenderReducer,
    });

    const persistConfig = {
    key: 'root',
    storage: AsyncStorage,
    };

    const persistedReducer = persistReducer(persistConfig, reducers);

    export const store = configureStore({
    reducer: persistedReducer,
    devTools: process.env.NODE_ENV !== 'production',
    middleware: [thunk],
    });

    // Infer the `RootState` and `AppDispatch` types from the store itself
    export type RootState = ReturnType<typeof store.getState>;
    // Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
    export type AppDispatch = typeof store.dispatch;
    export const persistor = persistStore(store);

App.tsx

  return (
    <ApolloProvider client={client}>
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <View style={styles.container}>
            <Text>Hello World</Text>
            <StatusBar style='auto' />
          </View>
        </PersistGate>
      </Provider>
    </ApolloProvider>
  );

This PersistGate Showing an Error Like this

Do you have any idea to resolve the issue??