i am facing issue in my aside menu of metronic theme which is, i have menu which contains sub menu options like dropdown when i click arrow button open the dropdown it stucks and not open until i refresh the page, give me the solution of this issue

code:
import React, {useState} from 'react'
import clsx from 'clsx'
import {useLocation} from 'react-router'
import {checkIsActive, KTIcon, WithChildren} from '../../../helpers'
import {toAbsoluteUrl} from '../../../helpers'
import {Link} from 'react-router-dom'
import {boolean} from 'yup'
import {useDispatch, useSelector} from 'react-redux'
import './menu.css'
import {setRightBarItem} from '../../../../store/slices/RightToolBarSlice'
import { RootState } from '../../../../store'
type Props = {
to: string
path: string
title: string
icon?: string
fontIcon?: string
hasBullet?: boolean
}

const AsideMenuItemWithSub: React.FC<Props & WithChildren> = ({
children,
to,
path,
title,
icon,
fontIcon,
hasBullet,
}) => {
const [isArrowDown, setIsArrowDown] = useState(false)

const handleArrowClick = () => {
setIsArrowDown(!isArrowDown) // Toggle the arrow direction
}
const dispatch = useDispatch()
const {pathname} = useLocation()
const isActive = checkIsActive(pathname, to)
console.log(pathname + ' ' + to)
/* let TopRoutes=[
"/schedule"
] */

// const showAsideDropdown = localStorage.getItem('showAsideDropdown')
const showAsideDropdown = useSelector((state:RootState)=>{
return state.UserSubscriptionDetail.showAsideDropdown
})
console.log("showAsideDropdown=",showAsideDropdown);

/* console.log("yes" +to + " "+ isUshare ) */
const TopMenu = () => {
console.log('top menu')
}
const setToolBarItem = (value: string) => {
dispatch(setRightBarItem(value))
}

return (
<div
className={clsx('menu-item', {'here show':showAsideDropdown }, 'menu-accordion')}
data-kt-menu-trigger='click'
>
{/* <Link to={to}> */}
<span className=' menu-link'>
{hasBullet && (
<span className='menu-bullet'>
<span className='bullet bullet-dot'></span>
</span>
)}
{icon && (
<span className='menu-icon'>
<img src={toAbsoluteUrl(path)} className='img-fluid' alt='' />
</span>
)}
{fontIcon && <i className={clsx('bi fs-3', fontIcon)}></i>}

<span
className='menu-title text-white'
style={{fontSize: '16px', fontWeight: '400'}}
onClick={handleArrowClick}
>
{title}
</span>

{/* <span className='menu-arrow' style={{color:"white"}}></span>

*/}

<span className={` ${isArrowDown ? 'down' : ''}`} onClick={handleArrowClick}>
{/* Render your arrow here */}
{isArrowDown ? (
<img
src={toAbsoluteUrl('/media/event/bottom_arrow.png')}
className='img-fluid'
alt=''
/>
) : (
<img src={toAbsoluteUrl('/media/event/left_arrow1.png')} className='img-fluid' alt='' />
)}
</span>
</span>

<div className={clsx('menu-sub menu-sub-accordion ', {'menu-active-bg': isActive})}>
{children}
</div>
</div>
)
}

export {AsideMenuItemWithSub}