Text component clipping behind transparent mesh

[woodward54]

See example video here.

The text seems to disappear based on the camera angle, which only happens when the text is rendered behind a transparent material. I have tried playing with the depthOffset but that didn't seem to help. Is there any way to fix this?

export const sharedTextProps: Partial<React.ComponentProps<typeof Text>> = {
  fontSize: 4,
  anchorX: 'center',
  anchorY: 'middle',
  textAlign: 'center',
}

...

<Text
  {...sharedTextProps}
  color={textColor}
  scale={textScale}
  position={[0, 0, 0.52]}
  maxWidth={textMaxWidth}
  >
  -- Create new --
</Text>

And here is the transparent cube with blue edges

'use client'

import * as THREE from 'three'
import { Edges } from '@react-three/drei'
import { usePackEntities } from '@/hooks/usePackEntities'

export default function TruckEntity({ ...props }) {
  const { truck } = usePackEntities()

  // Loading...
  if (!truck) return null

  return (
    // Scale up slightly to avoid mesh clipping
    <group scale={[1.0025, 1.005, 1.005]}>
      <mesh
        {...props}
        position={new THREE.Vector3(0, truck.data.dyInches / 2, 0)}
        scale={
          new THREE.Vector3(
            truck.data.dxInches,
            truck.data.dyInches,
            truck.data.dzInches
          )
        }
      >
        <boxGeometry />
        <Edges linewidth={1} scale={1.0} threshold={15} color={'#0388fc'} />

        <meshPhongMaterial color='#000000' opacity={0.1} transparent />
      </mesh>
    </group>
  )
}

[woodward54]

Figured it out by passing depthWrite={false} to the material