How to toggle React component using redux toolkit

I am trying to toggle (show/hide) react component with redux toolkit but i can not get the value of "toggle",redux toolkit useSelector is not working. it showing "undefined".

this code is not working.please put your suggestion about my mistakes.i need your help..please help me. index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { store, persistor } from "./app/store.js";
import { PersistGate } from "redux-persist/integration/react";
import { Provider } from 'react-redux';
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
  <Provider store={store}>
    <PersistGate persistor={persistor} loading={null}>
      <App />
    </PersistGate>
    </Provider>
  </React.StrictMode>
);

App.js

import './App.css';
import ToggleButton from './components/ToggleButton/ToggleButton';
import ToggleExample from './components/ToggleExample/ToggleExample';

function App() {
  return (
    <div className='example'>
      <ToggleExample/>
      <ToggleButton/>
    </div>
  );
}

export default App;

toggleSlice.js

import { createSlice } from '@reduxjs/toolkit'
const initialState = {
    toggle: false
}
export const toggleSlice = createSlice({
    name: 'toggleSidebar',
    initialState,
    reducers: {
        toggleVisible: (state) => {
            state.toggle = false
            console.log("state.toggle 1",state.toggle)
        },
        toggleInvisible: (state) => {
            state.toggle = true
            console.log("state.toggle 2",state.toggle)
        },
    }
})
export const { 
  toggleVisible, 
  toggleInvisible
 } = toggleSlice.actions;
 export const selectToggle = (state) => state.toggle;
export default toggleSlice.reducer;

store.js

import { configureStore } from '@reduxjs/toolkit'
import toggleSlice from '../feature/toggleSlice'
import storage from 'redux-persist/lib/storage'
import {
  persistReducer, persistStore, FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from 'redux-persist'

const persistConfig = {
  key: 'root',
  storage,
}
const persistedReducer = persistReducer(persistConfig, toggleSlice)


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

export const persistor = persistStore(store)

ToggleButton.js

import React from 'react'
import { useDispatch,useSelector } from 'react-redux';
import { toggleVisible,toggleInvisible, selectToggle } from '../../feature/toggleSlice';
import './ToggleButton.css'
const ToggleButton = () => {
  const dispatch = useDispatch();
  const  toggle  = useSelector(selectToggle)
  console.log(toggle)  
  const handleToggle = () => { 
   { toggle ?  dispatch(toggleVisible()) : dispatch(toggleInvisible()) }
}

  return (
    <div className='toggle-button-div'>
    <button className='toggle-button' onClick={() => handleToggle()}>toggle</button>
    </div>
  )
}

export default ToggleButton

ToggleExample.js

import React from 'react'
import './ToggleExample.css';
const ToggleExample = () => {
  return (
    <div className='toggle-example'>
    <ul>
        <li className='list-style'>Home</li>
        <li className='list-style'>About</li>
        <li className='list-style'>Contact</li>
    </ul>
    </div>
  )
}

export default ToggleExample