Why do my shadows have a grainy "dot matrix" look in Three.js?

Question

Expected behavior & code

I have a React Three.js scene with multiple elements with complex shadows. I use @react-three/drei use SoftShadows, and expect the shadows to be smooth.

 <mesh
    onClick={onClick}
    castShadow
    receiveShadow
    position={[0, 1, 0]}
    rotation-x={-Math.PI / 2}>
    <shapeGeometry args={[shape]} />
    <Material selected={selected} texture={texture} />
  </mesh>

Problematic behavior

For some reason, the shadows have a sort of screen door effect. I have seen others have similar issues with WebGL, but there the shadows are pixelated, while mine seem to be problematic in a different way?

Has anyone experienced something like this before?