react-three/dreiで球体の内側にtextureを張り付ける

前提・実現したいこと

360度動画を再生できるWebサイトを作成しているのですが、球体の内側にカメラを置いた際に球体の内側にtextureがなく、真っ白になります。
球体の内側にtextureを張り付ける方法を教えていただきたいです。

jQueryでは下記サイトを参考に問題なく動作したのですが、Reactに移行すると内側が白くなってしまいました。
https://sterfield.co.jp/designer/three-js%E3%81%AB%E3%82%88%E3%82%8Bwebgl%E3%81%A7360%E5%BA%A6%E3%83%91%E3%83%8E%E3%83%A9%E3%83%9E%E8%A1%A8%E7%A4%BA/

該当のソースコード

React.js
1import * as THREE from 'three'
2import React, { useState, useRef, Suspense, useEffect } from 'react'
3import { Canvas, useFrame, useThree } from '@react-three/fiber'
4import { Vector3, PerspectiveCamera } from 'three';
5import { OrbitControls } from "@react-three/drei"
6
7// import classes from  '../css/VideoPlayer.module.css'
8
9export const ThreeDimVideoPlayer = (props) => {
10
11    const style = {
12        height: '600px'
13    }
14    
15    return (
16        <Canvas style={style} camera={{ fov: 75, position: [1, 1, 1], near: 1,far: 5000, aspect: 2 }}>
17            <Suspense fallback={<>...Loading</>}>
18                <pointLight position={[10, 10, 10]} />
19                <Cube {...props} position={[1.2,0,0]} />
20                // 確認のため箱設置
21                <Box position={[-1.2, 0, 0]} />
22            </Suspense>
23            <axesHelper />
24            <OrbitControls />
25        </Canvas>
26        )
27};
28
29const Cube = (props) => {
30
31    const mesh = useRef();
32
33    const [canMove, setCanMove] = useState(false);
34
35    const [startX, setStartX] = useState(0);
36    const [startY, setStartY] = useState(0);
37    const [startZ, setStartZ] = useState(0);
38
39    const [video] = useState(() => {
40        const vid = document.createElement("video");
41        vid.src = 'http://localhost:8000' + props.video;
42        vid.setAttribute( 'webkit-playsinline', 'webkit-playsinline' );
43        vid.crossOrigin = "Anonymous";
44        vid.loop = true;
45        vid.muted = true;
46        vid.play();
47        return vid;
48    })
49
50    return (
51        <mesh
52            ref={mesh}
53            scale={[1, 1, 1]}>
54            <sphereBufferGeometry attach="geometry" args={[1, 30, 30]} translate={[30,0,0]} />
55            <meshBasicMaterial transparent={true} opacity={0.5} translate={30,0,0}>
56                <videoTexture attach="map" args={[video]} generateMipmaps={false} format={THREE.RGBFormat} minFilter={THREE.NearestFilter} maxFilter={THREE.NearestFilter} />
57            </meshBasicMaterial>
58            {/* <boxGeometry args={[1, 1, 1]} />
59            <meshStandardMaterial color='hotpink' /> */}
60        </mesh>
61    )
62}
63
64function Box(props) {
65    // This reference will give us direct access to the mesh
66    const mesh = useRef()
67    // Set up state for the hovered and active state
68    const [hovered, setHover] = useState(false)
69    const [active, setActive] = useState(false)
70    // Rotate mesh every frame, this is outside of React without overhead
71    useFrame((state, delta) => (mesh.current.rotation.x += 0.01))
72    // Return view, these are regular threejs elements expressed in JSX
73    return (
74      <mesh
75        {...props}
76        ref={mesh}
77        scale={active ? 1.5 : 1}
78        onClick={(event) => setActive(!active)}
79        onPointerOver={(event) => setHover(true)}
80        onPointerOut={(event) => setHover(false)}>
81        <boxGeometry args={[1, 1, 1]} translate={[30,0,0]} />
82        <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} opacity={0.5} translate={30,0,0} />
83      </mesh>
84    )
85  }