It is working as my modalOverlay gets mounted and unmounted based on the state props.show it recieves from parent. but the transitions are not happening. I want modalOverlay to have opacity of 0 to 0.9 and some transition as well. I checked on inspect element the classes like my-node-enter my-node-enter-active and others do get added. then why am I not getting the opacity reduced and transitions. Please Help

const ModalOverlay=(props)=>{

    const clickHandler=()=>{
        props.closeModal();
    }
    


    return(
        <>
            <CSSTransition
            mountOnEnter
            unmountOnExit
            in={props.show}
            timeout={200}
            classNames="my-node">
            <div className={classes.modalOverlay}>
                <div className={classes.closeModal}>
                    <div className={classes.closeButton} onClick={clickHandler}>
                                    
                    </div>
                </div>
                <div className={classes.options}></div>
                <div className={classes.contactUs}></div> 
            </div>
            </CSSTransition>
            
        </>
    )
}

export default ModalOverlay

Here's the css

.modalOverlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: auto;
    background: rgb(0, 0, 0); /* Just to visualize the extent */
    /* opacity: 0.9; */
    height: 100vh;
    display: flex;
    flex-direction: column;
    
    
  }

  .closeModal{
      
      background-color: aqua;
      width: 100%;
      height: 10%;
  }
  .options{
    background-color: bisque;
    width: 100%;
    height: 60%;
}
.contactUs{
   background-color: rgb(255, 66, 66);
    width: 100%;
    height: 30%;
}

.closeButton{
    margin-right: 15px;
    
}

  .fade-in-enter{
    opacity: 0;
  }
  .fade-in-enter-active{
    opacity: 1;
    transition: opacity 200ms;
  }
  .fade-in-exit{
    opacity: 1;
  }
  .fade-in-exit-active{
    opacity: 0;
    transition: opacity 200ms;
  }

  .my-node-enter {
    opacity: 0;
  }
  .my-node-enter-active {
    opacity: 1;
    transition: opacity 200ms;
  }
  .my-node-exit {
    opacity: 1;
  }
  .my-node-exit-active {
    opacity: 0;
    transition: opacity 200ms;
  }