how to remove CSSTransition when widow resize

Question

import {CSSTransition} from "react-transition-group";
 
<CSSTransition
            in={focused} timeout={200} classNames="slide">
             <NavSearch className={focused ? "focused" : ""}
                 onFocus={() => {
                  handleInputFocus()}}
                 onBlur={handleInputBlur}>
             </NavSearch>
</CSSTransition>

Css

 .slide-enter{
        transition:all .2s ease-out;
    }
    .slide-enter-active{
        width:320px;
    }
    .slide-exit{
        transition:all .2s ease-out;
    }
    .slide-exit-active{
        width:240px;
    }

Problem: When I resize my widow width I want to remove these transitions. But I don't know how to write my code.

 @media(max-width:1200px){
     
    }