Show menu items initially open using Prime React StyleClass

const MenuItem: React.FC<Props> = ({isActive, setActiveItem, item}) => {

  const handleClick = () => {
    setActiveItem && setActiveItem(item.label);
  };
  const className = isActive ? 'visible' : 'hidden';

  return (
    <li>
      {item.ref && (
        <StyleClass
          nodeRef={item.ref}
          selector="@next"
          enterClassName={className}
          enterActiveClassName="slidedown"
          leaveToClassName="hidden"
          leaveActiveClassName="slideup"
        >
          <a
            onClick={throttledOnClick}
            style={{ textDecoration: 'none' }}
            ref={item.ref}
            <span className="font-medium">{item.label}</span>
            <Ripple />
          </a>
          {item.children && item.children.length > 0 && (
            <ul
              className={`list-none py-0 pl-3 pr-0 m-0 ${className} overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out`}
            >
              {item.children.map((child, index) => (
                <MenuItem key={index} item={child} isActiveLink={router.pathname === child.link} />
              ))}
            </ul>
          )}
        </StyleClass>
      )}
    </li>
  );
};

Hello, when page loads i have isActive state which is set from localStorage but i want elemets to be visible first and then after click get StyleClass animations. When I try to bound classNames on isActive state it works but I can’t see transition anymore (slideup, slidedown). any possible fix?