Failing to animate(using transition) something from display none to block on hover

import "./Test.scss"

const Test = () => {

    function addClass(){
        const el=document.querySelector(".test")
        if(el){
            el.classList.add("active")
        }
    }
    function removeClass(){
        const el=document.querySelector(".test")
        if(el){
            el.classList.remove("active")
        }
    }
  return (
    <div className='my-container'>
        <button className='btn btn-primary btn-lg' onClick={addClass}></button>
        <button className='btn btn-danger btn-lg' onClick={removeClass}></button>
        <div className='test'>Test</div>
    </div>
  )
}

export default Test

.test{
    
    margin: 200px;
    background-color: red;
    display:none;
    width:300px;
    height:300px;
    transition: all 3s linear;
    transition-behavior: allow-discrete;
    &:hover{
        opacity: 1;
        display: block;
    }
    &.active{
        
        display: block;
    }
}
@starting-style {
    .test {
      opacity: 0;
    }
  }

.my-container{
    height:600px;
    width:100dvw
}