fix(docs): Update react guide for React 18

[mister-ben]

Update the useEffect() example to insert the player inside the provided element instead of usingt the provided element, because React strict mode's shenanigans with disposing and re-initialising the component don't play nice with Video.js's removal of the element on dispose.

[andreifilip123]

Hello,
Using the latest docs I'm running into an issue that could be really specific so I'm asking for guidelines if you have any.

In an old app, I had something like this:

<div data-vjs-player>
    <video ref={videoRef} />
    <div>Some custom added widget</div>
    <div>Another custom added widget</div>
</div>

and then:

  useEffect(() => {
    if (!playerRef.current) {
      const videoElement = videoRef.current;
      if (!videoElement) return;
      playerRef.current = videojs(videoElement, options, () => {
        if (onReady) onReady(playerRef.current);
      });
    }
  }, [options]);

and I used the old docs to create the video. This worked fine and the widgets showed up when going full screen as well.

However, using the new docs, I have something like this:

<div data-vjs-player>
    <div ref={videoRef} />
    <div>Some custom added widget</div>
    <div>Another custom added widget</div>
</div>

and then:

  useEffect(() => {
    if (!playerRef.current) {
      // The Video.js player needs to be _inside_ the component el for React 18 Strict Mode. 
      const videoElement = document.createElement("video-js");

      videoElement.className = 'videojs-big-play-centered';
      videoRef.current.appendChild(videoElement);
      playerRef.current = videojs(videoElement, options, () => {
        if (onReady) onReady(playerRef.current);
      });
    }
  }, [options]);

The issue I'm encountering is that now, the widgets I added are not showing up anymore when going full screen. After hours of debugging, I figured the issue is that with the new setup (.appendChild), the widgets and the video are not children of the same element (they're not siblings but rather there's one more nesting level between them).
The final thing looks something like this:

<div data-vjs-player>
    <div>
        <video-js>{/* all video js content */}</video-js>
    </div>
    <div>Some custom added widget</div>
    <div>Another custom added widget</div>
</div>

while in the old one it looked like this:

<div data-vjs-player {/* a bunch of videojs classes and things */}>
    <video />
    <div>Some custom added widget</div>
    <div>Another custom added widget</div>
    {/* other videojs required things like vjs-poster, vjs-text-track-display, etc */}
</div>

Any tips on how can I move forward with this? (and sorry if this is not the right place to ask).

Here's a codesandbox with the issue: https://codesandbox.io/s/react-videojs-strictmode-fullscreen-kn45xj

Thank you very much and I hope someone will get to this issue soon! 🙏