I am Creating a React-app and using Reduxjs Toolkit for state management. I am not able to understand why ChannelID and Channelname are undefined here. Here is the App.js

import { useSelector } from 'react-redux'
import { selectChannelId, selectChannelname } from '../../reduxjs toolkit/appSlice'

const Chats = () => {

  const user = JSON.parse(localStorage.getItem("user"))
  const data = localStorage.getItem("userData");
  const [userData, setUserData] = useState(JSON.parse(localStorage.getItem("userData")))

  const ChannelId = useSelector(selectChannelId)       // Giving Error Here
  const channelName = useSelector(selectChannelname)   // Giving Error Here

Here is the appSlice

import { createSlice } from "@reduxjs/toolkit";

export const appSlice = createSlice({
    "name":'app',
    initialState:{
        channelId:null,
        channelName:null,
    },
    reducers:{
        setChannelInfo: (state,action)=>{
            state.channelId = action.payload.channelId
            state.channelName = action.payload.channelName
        },
    }
})

export const {setChannelInfo}= appSlice.actions

export const selectChannelId = (state) => state.app.channelId
export const selectChannelname = (state) => state.app.channelName

export default appSlice.reducer;

Error Message

Code for Store

import { createStore } from "redux";
import reducers from "./reducers"

const store = createStore(reducers, {}, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

 export default store;