Sharing state with 2 components Redux

Trying to share the state between 2 components so the dashboard and the displayed component can change states simultaneously. Exmp: Switch from dashboard view to application view and display application component. Problem: I can't wrap my head around what I'm missing here and why the state does not work on my dashboard component.

Redux Slice:

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

const initialState = {
  selector: 0,
};

export const dashboardSlice = createSlice({
  name: 'mainDashState',
  initialState,
  reducers: {
    setSelector: (state, action) => {
      state.selector = action.payload;
    },
  },
});

export const { setSelector } = dashboardSlice.actions;

export default dashboardSlice.reducer;

Redux Store:

import { configureStore } from "@reduxjs/toolkit";
import mainDashSlice from './slices/mainDashSlice';

export const store = configureStore({
    reducer: {
        mainDashState: mainDashSlice,
    },
})

Dashboard.jsx:

import { React } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import '../../css/SideBar.css';
import { UilSignOutAlt } from '@iconscout/react-unicons';
import Logo from '../../../../assets/img/companyLogo.jpg';
import { SidebarData } from '../../Data/Data';
import { setSelector } from '../../../../features/redux/slices/mainDashSlice';
// import Applications from '../applicationsTab/Applications';

function SideBar() {
  const selector = useSelector((state) => state.selector);

  const dispatch = useDispatch();

  console.log(selector);

  return (
    <div className="Sidebar">
      {/* logo */}
      <div className="logo">
        <img src={Logo} alt="logo" />
        <span>Company Name</span>
      </div>
      {/* menu */}
      <div className="menu">
        {SidebarData.map((item, index) => (
          /* eslint-disable */
          <div 
            role="menu"
            className={selector === index ? 'menuItem active' : 'menuItem'}
            key={index}
            onClick={() => dispatch(setSelector(selector))}
            onKeyDown={() => dispatch(setSelector(selector))}
          >
            <item.icon />
            <span>{item.heading}</span>
          </div> 
        ))}
        <div className="menuItem">
          <UilSignOutAlt />
        </div>
      </div>
    </div>
  );
}

export default SideBar;

TL;DR: When clicking on the dashboard "Application" change the state in redux for another component as well to re-render the main tab.

Thanks guys! Do need to understand what I'm doing wrong...