The transition set in React with classnames does'n work

In a MobileMenu component, I add class 'open' when state is changed. This adds class 'open' to the div with class 'mobileMenu-subNavSlider' and makes it appear. It should slowly move from right to left during the transition but the transition doesn't work. The element appears but without transition. How to make it work?

const MobileMenu = () => {
   const [visible, setVisible] = useState(false)

   return (
     <div className="mobileMenu">
         <div className="mobileMenu-body"
             onClick={() => setVisible(true)}>
                     Hello
         </div>
         <div
            className={classNames('mobileMenu-subNavSlider', 
           {open: visible})}
         >
         </div>
    </div>
  )
}
        *** CSS ***

.mobileMenu {
   min-height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow-x: hidden;
   background: #410078;
   color: #fff;
 }

.mobileMenu-subNavSlider {
  position: absolute;
  top: 0;
  left: 20px;
  right: 0;
  bottom: 0;
  box-shadow: 0 0 40px rgb(0 0 0 / 60%);
  background: #6504b5;
  display: none;
  transform: translateX(102%);
}

.mobileMenu-subNavSlider.open {
  display: block;
  transform: translateX(0%);
  transition: transform 5s;
}   

.mobileMenu-body {
  padding: 80px 130px 30px;
  background: #6504b5;
}