title: Video component not rendering after the first render
body: <p>I'm trying to figure it out why the video component is not staying constant on its every render. The first time the video component is loaded, it works fine, however, when I go on another component and then go back to the video component, the video doesnt load.</p>
  <p>What could be the problem?</p>
  <p>First pic working as expected: <a href="https://i.stack.imgur.com/v1BSp.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/v1BSp.jpg" alt="enter image description here" /></a>
  Second pic not working: <a href="https://i.stack.imgur.com/odPYO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/odPYO.png" alt="enter image description here" /></a></p>
  <pre><code>let videoUrl = `http://xxx.xxx.xxx.xxx:8080/hls/${appState.profileUser.user.streamKey}.m3u8`;
  
  useEffect(() =&gt; {
      setIsVisible(true);
  }, []);
  
  return (
      &lt;&gt;
          &lt;div className=&quot;video-side&quot;&gt;
              {isVisible ? (
                  &lt;ReactPlayer
                      key={Math.random()}
                      url={videoUrl}
                      playing={true}
                      loop={true}
                      forcehls=&quot;true&quot;
                      width=&quot;fit-content&quot;
                      muted
                      controls={true}
                      height=&quot;464&quot;
                  &gt;&lt;/ReactPlayer&gt;
              ) : (
                  ''
              )}
  </code></pre>