build this part of the code with useState initially and everything worked perfectly but I need to share this state with my main component (no relationships between those two) and decided to use Redux but def something is wrong, any ideas?

Here's the console error:

MUI: The value provided to the Tabs component is invalid. None of the Tabs' children match with "-1". You can provide one of the following values: 0, 1, 2.

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 { setDashboard } from '../../../../app/actions';

function SideBar() {
  const selected = useSelector((state) => state.dashboard);
  const dispatch = useDispatch();

  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={selected === index ? 'menuItem active' : 'menuItem'}
            key={index}
            onClick={() => dispatch(setDashboard(index))}
            onKeyDown={() => dispatch(setDashboard(index))}
          >
            <item.icon />
            <span>{item.heading}</span>
          </div>
        ))}
        <div className='menuItem'>
          <UilSignOutAlt />
        </div>
      </div>
    </div>
  );
}

export default SideBar;