Fix big grid crashing due to missing React import

by fixing the cause rather than the symptom: this upgrades the code to use the new, recommended JSX transform mode of React 17+, which no longer requires you to import React manually just to write JSX.

src/video-grid/BigGrid.tsx

@@ -17,7 +17,6 @@ limitations under the License.
 import TinyQueue from "tinyqueue";
 import { RectReadOnly } from "react-use-measure";
 import { FC, memo, ReactNode } from "react";
-import React from "react";
 
 import { TileDescriptor } from "./VideoGrid";
 import { Slot } from "./NewVideoGrid";

src/video-grid/NewVideoGrid.tsx

@@ -16,7 +16,7 @@ limitations under the License.
 
 import { SpringRef, TransitionFn, useTransition } from "@react-spring/web";
 import { EventTypes, Handler, useScroll } from "@use-gesture/react";
-import React, {
+import {
   CSSProperties,
   FC,
   ReactNode,

src/video-grid/TileWrapper.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { memo, ReactNode, RefObject, useRef } from "react";
+import { memo, ReactNode, RefObject, useRef } from "react";
 import { EventTypes, Handler, useDrag } from "@use-gesture/react";
 import { SpringValue, to } from "@react-spring/web";
 

src/video-grid/VideoGrid.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {
+import {
   ComponentProps,
   Key,
   ReactNode,
@@ -819,7 +819,7 @@ export interface VideoGridProps<T> {
   layout: Layout;
   disableAnimations: boolean;
   layoutStates: LayoutStatesMap;
-  children: (props: ChildrenProperties<T>) => React.ReactNode;
+  children: (props: ChildrenProperties<T>) => ReactNode;
 }
 
 // Represents something that should get a tile on the layout,

src/video-grid/VideoTile.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback } from "react";
+import { ComponentProps, forwardRef, useCallback, useEffect } from "react";
 import { animated } from "@react-spring/web";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
@@ -57,12 +57,12 @@ interface Props {
   targetWidth: number;
   targetHeight: number;
   className?: string;
-  style?: React.ComponentProps<typeof animated.div>["style"];
+  style?: ComponentProps<typeof animated.div>["style"];
   showSpeakingIndicator: boolean;
   showConnectionStats: boolean;
 }
 
-export const VideoTile = React.forwardRef<HTMLDivElement, Props>(
+export const VideoTile = forwardRef<HTMLDivElement, Props>(
   (
     {
       data,
@@ -87,7 +87,7 @@ export const VideoTile = React.forwardRef<HTMLDivElement, Props>(
       () => member?.rawDisplayName ?? "[👻]",
       [member]
     );
-    React.useEffect(() => {
+    useEffect(() => {
       if (member) {
         const updateName = () => {
           setDisplayName(member.rawDisplayName);