How to use Livelink.js with React?

import { useEffect, useRef } from 'react';
import { PUBLIC_TOKEN, SCENE_UUID } from 'config.js';

export const Canvas = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    let cancelled = false;

    const initApp = async () => {
      await SDK3DVerse.joinOrStartSession({
        userToken: PUBLIC_TOKEN,
        sceneUUID: SCENE_UUID,
        canvas: document.getElementById('display-canvas'),
        viewportProperties: {
          defaultControllerType: SDK3DVerse.controller_type.none,
        },
      });
    };

    SDK3DVerse.disconnectFromSession()
      .catch(() => null)
      .then(async () => {
        if (cancelled) return;
        await initApp();
      });

    return () => {
      cancelled = true;
    };
  }, []);

  return (
    <canvas
      ref={canvasRef}
      id='display-canvas'
      className='w-screen h-screen'
      tabIndex={1}
    ></canvas>
  );
};

useEffect(() => {
    const handleEntitiesUpdated = (entities) => {
      // Do something with entities
    };

    SDK3DVerse.notifier.on('onEntitiesUpdated', handleEntitiesUpdated);

    return () => {
      SDK3DVerse.off('onEntitiesUpdated', handleEntitiesUpdated);
    };
}, []);