Grid not receiving shadow

[sabinayakc]

When using the Grid Component, I am trying to cast shadows onto it using a GTLF model. But it doesn't seem to work. Am I missing anything?

Here is my simple code

const GroundGrid: React.FC = () => {
  const gridConfig = {
    cellSize: 0.5,
    cellThickness: 0.5,
    cellColor: '#6f6f6f',
    sectionSize: 3,
    sectionThickness: 1,
    sectionColor: '#9d4b4b',
    fadeDistance: 100,
    fadeStrength: 1,
    followCamera: false,
    infiniteGrid: true
  }
  return <Grid position={[0, -0.01, 0]} args={[10.5, 10.5]} {...gridConfig} receiveShadow/>
}

<Canvas shadows camera={{ position: [2, 3, -6], fov: 45, near: 1, far: 1000 }}>
    <color attach="background" args={[theme==='light' ? '#ffffff' : '#000000']} />
    <directionalLight color={0xffffff} intensity={3} position={[-3, 10, -10]} castShadow />
    <group>
        <Suspense fallback={null}>
            <Gltf src="/models/jump-transformed.glb" position={new Vector3()} castShadow receiveShadow />

        </Suspense>
        <GroundGrid />
    </group>
    <OrbitControls />
</Canvas>

However, if I use a planeGeometry it works.

       <mesh rotation={[-Math.PI / 2, 0, 0]} receiveShadow>
              <planeGeometry args={[200, 200]} />
              <meshPhongMaterial color={0xcbcbcb} depthWrite={false} />
            </mesh>

How do I enable shadows properly on the Grid itself without having to add another plane geometry?