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'> )} {icon && ( <span className='menu-icon'> <img src={toAbsoluteUrl(path)} className='img-fluid' alt='' /> )} {fontIcon && <i className={clsx('bi fs-3', fontIcon)}>}

    <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}