MediaElement.js with Reactjs

Question

I am trying to use MediaElement.js HTML media framework in my react application and I can't make it work. Only what it displays is the control and video panel.

I am following usage docs: https://github.com/mediaelement/mediaelement/blob/master/docs/usage.md#react

No errors in a console and rendered HTML looks like this:

I have installed mediaelement + flv.js + hls.js packages with npm. My code for MediaElement.js component is the same as a code from the documentation. Using it with following code:

sources = [
  {src: 'www.youtube.com/watch?v=twYp6W6vt2U', type: 'video/youtube'},
 
],
config = {controls:0},
tracks = {}; 
...
 return (
<>
 <div className="player-wrapper">
  <MediaElement
    id="player1"
    preload="none"
    controls
    width="640"
    height="800"
    mediaType = "video"
    poster=""
    sources={JSON.stringify(sources)}
    options={JSON.stringify(config)}
    tracks={JSON.stringify(tracks)} 
  />
 </div>
</>

I'm not sure if I'm doing something wrong or I am missing some configuration. Any help is appreciated.