Having trouble with react three fiber: THREE.WebGLRenderer: Context Lost

I have some kind of problem where my dice are giving the error

THREE.WebGLRenderer: Context Lost.

I am not sure but I think it has something to do with switching from use-cannon to @react-three/cannon. When I try to render D4, I get the error. The box however seems to work just fine which is why I am a bit lost on what exactly I should try next to solve this problem.

import * as THREE from 'three'
import ReactDOM from 'react-dom'
import React, { Suspense, useMemo, useState, useEffect } from 'react'
import { Canvas, useFrame, useLoader } from '@react-three/fiber'
import { Physics, useBox, usePlane, useSphere, useConvexPolyhedron } from '@react-three/cannon'
import niceColors from 'nice-color-palettes'
import './styles.css'
// import { useConvexPolyhedron } from '@react-three/cannon';
import { Tetrahedron, RoundedBox } from '@react-three/drei';

import { TestDice } from './TestDice.js'





const DiceOverview = (props) => {

  // console.log('trigger check');
  // console.log(dice, 'something odd');
  //radius and the rest are all passed in so likely radius adjusts these values.



  function Plane({ color, ...props }) {
    const [ref, api] = usePlane(() => ({ ...props }))
    return (
      <mesh ref={ref} receiveShadow >
        <planeBufferGeometry onClick={() => api.applyImpulse([0, 20, 0], [0, 0, 0])} attach="geometry" args={[1000, 1000]} />
        <meshPhongMaterial attach="material" color={color} />
      </mesh>
    )
  }


  function Box() {
    const [ref, api] = useBox(() => ({ mass: 1, args: [4, 4, 4], isKinematic: true }))
    useFrame(state => {
      const t = state.clock.getElapsedTime()
    })
    return (
      <mesh ref={ref} castShadow receiveShadow>
        <boxBufferGeometry attach="geometry" args={[4, 4, 4]} />
        <meshLambertMaterial attach="material" color={'#3F00FF'} side={THREE.DoubleSide} />
      </mesh>
    )
  }


  const D4 = (props) => {
    console.log(props, 'what is D4 getting?')
    console.log(Tetrahedron, 'this is tetrahedron');
    console.log('hello');
    const radius = 1;
    const tetrahedronGeometry = new THREE.TetrahedronGeometry(radius);
    const [ref, api] = useConvexPolyhedron(() => {
      return {
        args: tetrahedronGeometry,
        mass: 1,
        ...props,
      };
    });
    console.log(ref, api, 'are these triggering');

    return (
  <Tetrahedron
    args={radius}
    ref={ref}
    onClick={() => api.applyImpulse([0, 20, 40], [0, 0, 0])}
    castShadow
    receiveShadow
  >
        <meshNormalMaterial attach="material" />
      </Tetrahedron>
    );
  };


  const Dtest = (props) => {


    return (
      <RoundedBox
        args={[1, 1, 1]} // Width, Height and Depth of the box
        radius={0.05} // Border-Radius of the box
        smoothness={4} // Optional, number of subdivisions
        position={[0, 0, 10]}
      >
        <meshPhongMaterial attach="material" color="#f3f3f3" wireframe />
      </RoundedBox>

    );
  };



  const glProps = { alpha: false };
  const cameraProps = { position: [0, -12, 16] };
  // let keys = Object.keys(props)

  // console.log('what is this color', niceColors[10][4])
  return (
    <>
      <button onClick={() => { console.log('click') }}>button</button>
      <button>toss</button>
      <TestDice />
      <div style={{ position: "relative", width: 500, height: 500 }}>
        <Canvas id="myCanvas" concurrent shadowMap sRGB gl={glProps} camera={cameraProps} width={100}>
          <hemisphereLight intensity={0.35} />
          <spotLight position={[30, 0, 30]} angle={0.3} penumbra={1} intensity={2} castShadow shadow-mapSize-width={256} shadow-mapSize-height={256} />
          <pointLight position={[-30, 0, -30]} intensity={0.5} />

          <Physics className='physics' gravity={[0, 0, -60]}>
            <Plane color={niceColors[10][4]} />
            <Plane color={niceColors[10][1]} position={[-6, 0, 0]} rotation={[0, 0.9, 0]} />
            <Plane color={niceColors[10][2]} position={[6, 0, 0]} rotation={[0, -0.9, 0]} />
            <Plane color={niceColors[10][3]} position={[0, 6, 0]} rotation={[0.9, 0, 0]} />
            <Plane color={niceColors[10][0]} position={[0, -6, 0]} rotation={[-0.9, 0, 0]} />

            <D4 position={[-4, 0, 2]} rotation={[0, 1, 0]} />

            <Dtest />
            {/* {promise} */}
            <Box />
          </Physics>
        </Canvas>
      </div>
    </>
  );
};

export default DiceOverview;

This is my package.JSON file:

{
  "name": "basictemplate",
  "version": "1.0.0",
  "description": "template to use in future projects",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode development --watch"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/jessemchung/template.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/jessemchung/template/issues"
  },
  "homepage": "https://github.com/jessemchung/template#readme",
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "@babel/preset-react": "^7.14.5",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.2.0",
    "style-loader": "^3.2.1",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0"
  },
  "dependencies": {
    "@react-three/cannon": "^3.0.1",
    "@react-three/drei": "^7.5.0",
    "@react-three/fiber": "^7.0.6",
    "nice-color-palettes": "^3.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "three": "^0.132.2"
  }
}

After more testing I believe the useConvexPolyhedron is what is causing trouble for me. Specifically, I think the problem is related to the args value. Perhaps something changed in the updated version in some way as this worked with use-cannon (which is now deprecated).

Long story short everyone, I messsaged the people responsible for the github and they gave a good explanation.

https://github.com/pmndrs/use-cannon/issues/274

Basically, this was deprecated and they do it differently now