Unmounting component in react-three-fiber causes text rendering to fail to find font info on subsequent renders

[croche2574]

I have a menu component that mounts and unmounts depending on whether the menu's trigger exists and has been toggled. The first time the menu is created, the text renders fine. All future times result in the text creator failing to find the font info (returns null). Desperate for an answer, code below.

// Trigger component, multiple may exist at a time
const ItemMarker = memo((props) => {
    const { id, itemData, position, scale, quaternion } = props
    const [color, setColor] = useState('blue')
    const [menuVis, setMenuVis] = useState(false)
    const menuRef = useRef()

    console.log('created', itemData.name)
    console.log('visible', menuVis)

    const onMarkerSelect = (e) => {
        setColor((Math.random() * 0xffffff) | 0)
        setMenuVis(!menuVis)
        //console.log("item data", itemData)
    }

    return (
        <>
            <Interactive onSelect={onMarkerSelect}>
                <mesh position={position} scale={scale} quaternion={quaternion} castShadow receiveShadow>
                    <sphereGeometry args={[5, 24, 24]} />
                    <meshStandardMaterial color={color} />
                </mesh>
            </Interactive>

            {menuVis && itemData && <InfoMenu menuRef={menuRef} data={itemData} menuVis={menuVis} setMenuVis={setMenuVis} position={position} scale={scale} FontJSON={FontJSON.valueOf()} FontImage={FontImage.valueOf()} />}
        </>
    )})

<img width="899" alt="image" src="https://github.com/felixmariotto/three-mesh-ui/assets/17228929/7066ab2b-99d9-43f0-882c-7317229f32ca">

// InfoMenu Component (different file)
<img width="899" alt="Screenshot 2023-11-28 122700" src="https://github.com/felixmariotto/three-mesh-ui/assets/17228929/7c0d733f-f031-4ecc-86c9-b8f15ea83f33">

export const InfoMenu = (props) => {
  const itemData = props.data
  console.log("Menu:", itemData)
  console.log("menu pos", props.position)
  

  useEffect(() => {
    console.log(props.menuRef.current)
  }, [props.menuVis])

  useFrame(() => {
    console.log("update loop", props.menuRef.current)
    console.log("update loop font", props.menuRef.current.fontFamily)
    try {
      ThreeMeshUI.update()
    } catch (error) {
      console.log(error)
    }
  })
  return (
    <block
      position={props.position.clone()}
      ref={props.menuRef}
      args={[
        {
          width: 1.05 + 0.75,
          height: 1.45,
          backgroundOpacity: 0.3,
          fontFamily: props.FontJSON,
          fontTexture: props.FontImage,
          alignItems: 'center',
        }
      ]}>
      <Title name={itemData.name} brand={itemData.brand} servings={itemData.servings} />

      <block
        args={[
          {
            width: 1.05 + 0.75,
            height: 0.9,
            backgroundOpacity: 0.0,
            contentDirection: 'row',
            alignItems: 'top',
          }
        ]}>
        <NutritionBlock data={itemData} />
        <ItemViewBlock />
        <IngredientBlock data={itemData} />
      </block>
      <InfoBlock data={itemData} />
    </block>
  )
}

[suchwerk]

I ran in the same issue. Any progress here?