How can I change dynamically the Width and Height to my Lottie in React?

I’m working on a web app builded in Django and React, I’ve a question about to change the width and height of my Lottie img when the screen change Its size.
That’s my Lottie configuration:

  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData: animation,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice"
    }
  }

   <div id='lottie-container'>      
        <Lottie
        id='lottie-icon'
        options={defaultOptions}
        />
   </div>

That’s CSS media query:

/*------|
Desktop |
-------*/

@media screen and (min-width:991px) {
    /* LOTTIE */
    #lottie-icon{
        width: 400px;
        height: 400px;
    }
}

/*-----|
Mobile |
------*/

@media screen and (max-width:991px) {
    /* LOTTIE */
    #lottie-icon{
        width: 200px;
        height: 200px;
    }
}