Shadow acne on castShadow & receiveShadow Mesh – Threlte/Three.js

When I try to create a Mesh that receives its own shadow, It always creates shadow acne.

For example, this code…

<script lang="ts">
  import { Canvas, OrbitControls, T, Three } from '@threlte/core';
  import { PointLight } from 'three';

  const light = new PointLight();
  light.shadow.mapSize.width = 4096;
  light.shadow.mapSize.height = 4096;
</script>

<Canvas>
  <T.PerspectiveCamera makeDefault fov={60} position={[0, 0, 7]}>
    <OrbitControls enableZoom={true} />
  </T.PerspectiveCamera>

  <T.AmbientLight intensity={0.2} />
  <Three
    type={light}
    intensity={1}
    distance={100}
    decay={2}
    position={[10, 0, 2]}
    bias={0.0001}
    castShadow
  />

  <T.Mesh castShadow receiveShadow>
    <T.TorusGeometry />
    <T.MeshStandardMaterial />
  </T.Mesh>
</Canvas>

…creates this scene

I’ve tried multiple values of bias, near and far. Anyone have any idea?