Version Upgrade Causes Component To No Longer Render

[crgold]

Hey everyone! I'm a bit new to this, so I apologize if I am missing something obvious (which is likely the case). So I started with react-three-fiber version 5.2.1, but when I go to upgrade it, one of my components stops appearing on the screen. Everything else works fine other than this one component. In order to track where the problem starts, I started to upgrade incrementally and it appears to start at the very next version of 5.3.0. For this code, I am using react 17.0.1, drei, jotai, r3f, and @react-three/cannon.

The problem code in question starts here where I create some dice using some state variables which are also shown here:

  const [gameStarted, setGameState] = useAtom(gameStartState);
  const [reroll, rerollDice] = useAtom(rerollState);
  const [dicePosition] = useAtom(diceDefaultState);

      {gameStarted && (
        <>
          <Suspense fallback={null}>
            {dicePosition.map((pos) => {
              return (
                <ThemedDie
                  key={pos.uuid}
                  theme="action"
                  dicePos={pos.position}
                  rerollToggle={reroll}
                />
              );
            })}
            <CollisionMesh />
          </Suspense>

The following is the ThemedDie component:

const ThemedDie = (props) => {
  const { theme, dicePos, rerollToggle } = props;
  const actionTextures = useTexture([...themes.action.images]);

  const [mesh, api] = useBox(() => ({
    mass: 300,
    inertia: 13,
    rotation: [
      Math.random() * Math.PI,
      Math.random() * Math.PI,
      Math.random() * Math.PI,
    ],
    linearDamping: 0.5,
    angularDamping: 0.1,
    material: { restitution: 0.3 },
  }));

  useEffect(() => {
    api.position.set(dicePos[0], dicePos[1], dicePos[2]);
    api.velocity.set(15, 0, -10);
    api.angularVelocity.set(-15, 2, -10);
  }, [api.angularVelocity, api.position, api.velocity, dicePos, rerollToggle]);

  if (theme === "action") {
    return (
      <mesh
        onClick={() => {
          api.position.set(dicePos[0], dicePos[1], dicePos[2]);
          api.velocity.set(15, 0, -10);
          api.angularVelocity.set(-15, 2, -10);
        }}
        ref={mesh}
      >
        <boxBufferGeometry />
        {actionTextures.map((image) => {
          return (
            <meshStandardMaterial
              key={image.uuid}
              flatShading
              roughness={0.8}
              attachArray="material"
              map={image}
            />
          );
        })}
      </mesh>
    );
  }
  // if we are here, something has gone wrong
  return new Error("problem encountered in ThemedDice");
};
ThemedDie.propTypes = {
  theme: PropTypes.string.isRequired,
  dicePos: PropTypes.arrayOf(PropTypes.number).isRequired,
  rerollToggle: PropTypes.bool.isRequired,
};

and this is the state info it is using from jotai:

import { atom } from "jotai";
import { v4 as uuidv4 } from "uuid";

export const gameStartState = atom(false);
export const rerollState = atom(false);

export const diceDefaultState = atom([
  {
    uuid: uuidv4(),
    position: [-13, 5, 6],
  },
  {
    uuid: uuidv4(),
    position: [-13, 6, 4],
  },
  {
    uuid: uuidv4(),
    position: [-13, 7, 5],
  },
  {
    uuid: uuidv4(),
    position: [-13, 5, 5],
  },
  {
    uuid: uuidv4(),
    position: [-13, 6, 2],
  },
]);

When I run the code, no errors are shown in the console. My best guess is that it is stuck in suspense for some reason that is a bit beyond me. I checked the changelogs and I am thinking it might have something to do with the upgrade of use-asset, but that is just a guess.

Any ideas where I might be going wrong here? I'm a bit stumped. If I revert the r3f version back to 5.2.1, it works fine. The only time I can fish an error out of it is if I use the drie progress bar as the fallback for the suspense. When I do, I get the following error:

Cannot update a component (progress bar) while rendering a different component (ThemedDie)

Thanks in advance for your time!