Nextjs 14 support?

[Sisableng]

i try to use this in nextjs 14 latest version but i got white screen like this

i dont know what the problem is, im newbie here.
here is my example project

package.json

"dependencies": {
    "@oplayer/core": "^1.2.31",
    "@oplayer/danmaku": "^1.2.24",
    "@oplayer/dash": "^1.2.23",
    "@oplayer/hls": "^1.2.23",
    "@oplayer/mpegts": "^1.2.23",
    "@oplayer/plugins": "^1.0.9",
    "@oplayer/react": "^1.2.10",
    "@oplayer/torrent": "^1.2.23",
    "@oplayer/ui": "^1.2.34",
    "hls.js": "^1.4.12",
    "next": "14.0.3",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.3",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }

Player.tsx component

"use client";
import React, { useRef } from "react";
import Player from "@oplayer/react";
import hls from "@oplayer/hls";
import ui from "@oplayer/ui";
import { vttThumbnails } from "@oplayer/plugins";

const plugins = [
  ui({
    pictureInPicture: true,
    slideToSeek: "always",
    screenshot: true,
    keyboard: { global: true },
  }),
    hls(),
  vttThumbnails({
    src: "https://preview.zorores.com/4b/4b1a02c7ffcad4f1ee11cd6f474548cb/thumbnails/sprite.vtt",
  }),
];

export default function TestPlayer() {
  const player = useRef<any>(null);
  return (
    <div>
      <p>TestPlayer</p>
      <Player
        plugins={plugins}
        ref={player}
        source={{
          title: "Oppeheimer",
          src: "https://oplayer.vercel.app/君の名は.mp4",
          poster: "https://oplayer.vercel.app/poster.png",
        }}
        onEvent={(e) => console.log(e)}
      />
    </div>
  );
}

can you guys give me the beginner example for this case?

[shiyiya]

disable react strict mode

[Sisableng]

you right, my bad sorry