Why didn’t display: flex work on the media controller, and why did the player controls stop working when I wrapped the video in a <div>?

[monzuralam]

I attempted to implement CSS flex options on the media controller, but it didn't work as expected. I also wrapped the video tag with a div for my design needs the player controls didn't work.

How to fix that issue?
I use the media-chrom React version.
ex:

<MediaController
  audio={['audio-player', 'podcast-player', 'woo-player'].includes(type)} style={{ display: "flex", flexDirection: "row", width: "100%" }}>
      {['audio-player', 'podcast-player', 'woo-player'].includes(type) &&
          (['local', 'external'].includes(sourceType) || !!rssfeed) && (
              <audio
                  slot="media"
                  src={source}
                  preload="metadata"
                  crossOrigin="anonymous"
              />
          )
      }
    <div class="wrap">
      {type === 'video-player' && ['local', 'external'].includes(sourceType) && (
      <div class="smp-media">
          <video
              ref={playerRef}
              slot="media"
              src={source}
              poster={thumbnail}
              onPlay={() => setPlaying(true)}
              onPause={() => setPlaying(false)}
              preload="metadata"
              crossOrigin="anonymous"
          />
          </div>
      )}
      
      <MediaControlBar>
      .....
      </MediaControlBar>
    </div>
</MediaController>

I also try to assign media attributes on the MediaController & set id on the video.