Выбранный элемент меню на боковой панели не меняет цвет фона при нажатии в antd design React ⇐ CSS

[Anonymous]

У меня есть приложение React, в котором я добавил боковую панель. Он работает по щелчку, и экран прекрасно меняется. Но когда элемент выбран на боковой панели, выбранный цвет фона не меняется при нажатии. После нажатия на элемент он переходит к выбранному по умолчанию элементу, а при втором нажатии цвет фона работает.
Как это исправить?
Вот что у меня есть сейчас:

Код: Выделить всё

import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { PieChartOutlined, MailOutlined } from '@ant-design/icons';
import { Menu } from 'antd';
import type { MenuProps } from 'antd';
import { useWindowDimensions } from '../modules/hooks';
import profileIcon from '../assests/profileIcon.png';
import { useSelector } from 'react-redux';
import { RootState } from '~/store';

type MenuItem = Required['items'][number];

const Sidebar: React.FC = ({
showFlowSheets,
patientData,
}) => {
const [collapsed, setCollapsed] = useState(false);
const [selectedKey, setSelectedKey] = useState('1'); // Manage selected key state
const { height } = useWindowDimensions();
const navigate = useNavigate();
const userState = useSelector((state: RootState) => state.user);
const supervisorState = useSelector((state: RootState) => state.supervisor);

const items: MenuItem[] = [
{ key: '1', icon: , label: 'Patients List' },
...(showFlowSheets
? [
{
key: 'sub1',
label: 'Flow Sheets',
icon: ,
children: [
{
key: '2',
label: 'ADDS Chart',
children:
supervisorState.isSupervisorAuthenticated && !userState.isAuthenticated
? [{ key: '9', label: 'View ADDS Chart' }]
: null,
},
{
key: '3',
label: 'IV Fluids Chart',
children:
supervisorState.isSupervisorAuthenticated && !userState.isAuthenticated
? [
{ key: '6', label: 'View IV Fluids' },
{ key: '7', label: 'Add IV Fluids' },
]
: null,
},
{
key: 'sub2',
label: 'Medication Chart',
children:
supervisorState.isSupervisorAuthenticated && !userState.isAuthenticated
? [
{ key: '4', label: 'PRN Medicine Chart' },
{ key: '5', label: 'Regular Medicine Chart' },
{
key: 'sub3',
label: 'View Student Records',
children: [
{ key: '12', label: 'PRN Student Records' },
{ key: '15', label: 'Regular Student Records' },
],
},
]
: [
{ key: '10', label: 'PRN Medicine Chart' },
{ key: '11', label: 'Regular Medicine Chart' },
],
},
],
},
{
key: supervisorState.isSupervisorAuthenticated && !userState.isAuthenticated ? '14' : '13',
icon: ,
label:
supervisorState.isSupervisorAuthenticated && !userState.isAuthenticated
? 'View Progress Notes'
: 'Progress Notes',
},
]
: []),
];

const handleMenuClick = (e: { key: string }) =>  {
setSelectedKey(e.key);

switch (e.key) {
case '1':
navigate('/private');
break;
case '2':
navigate('/adds-chart', { state: { patientData } });
break;
case '3':
navigate('/iv-fluids-chart', { state: { patientData } });
break;
case '4':
navigate('/prn-chart-sup', { state: { patientData } });
break;
case '5':
navigate('/regular-chart-sup', { state: { patientData } });
break;
case '6':
navigate('/view-iv-fluids', { state: { patientData } });
break;
case '7':
navigate('/add-iv-fluids', { state: { patientData } });
break;
case '9':
navigate('/view-adds-chart', { state: { patientData } });
break;
case '10':
navigate('/prn-chart', { state: { patientData } });
break;
case '11':
navigate('/regular-chart', { state: { patientData } });
break;
case '12':
navigate('/prn-student-records', { state: { patientData } });
break;
case '13':
navigate('/progress-notes', { state: { patientData } });
break;
case '14':
navigate('/view-progress-notes', { state: { patientData } });
break;
case '15':
navigate('/reg-student-records', { state: { patientData } });
break;
default:
break;
}
};

return (



[img]{profileIcon} style={{ width: 49, height: 42, marginLeft: 20 }} /[/img]

{userState.isAuthenticated ? 'Student' : 'Supervisor'}


);
};

export default Sidebar;

Подробнее здесь: https://stackoverflow.com/questions/790 ... in-antd-de