How to prevent <SpotLight /> from being affected by <ContactShadows />

Questions
1

I used ContactShadows from @react-three/drei.

How to make the SpotLight component not have a shadow underneath it? only Avatar component should receive shadow.

"use client";

import { Button } from "@/components/ui/button";
import {
  ContactShadows,
  Environment,
  Html,
  OrbitControls,
  SpotLight,
} from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
import { IconMail } from "justd-icons";
import { useTheme } from "next-themes";
import Link from "next/link";
import { Suspense } from "react";
import { Avatar } from "./avatar";
import Loader3d from "./loader-3d";

const World3D = () => {
  const { theme } = useTheme();

  return (
    <div className="h-[391px] overflow-hidden rounded-3xl border md:h-full">
      <Canvas
        shadows
        camera={{ position: [0, 2, 5], fov: 30 }}
        className="relative aspect-square h-[391px] hover:cursor-grab active:cursor-grabbing md:h-full"
      >
        <color
          attach="background"
          args={[theme == "light" ? "#ffffff" : "#0a0a0a"]}
        />
        <Suspense fallback={<Loader3d />}>
          <OrbitControls
            minPolarAngle={Math.PI / 2}
            maxPolarAngle={Math.PI / 2}
            enableZoom={false}
            // Y axis rotation limits
            minAzimuthAngle={0 + -Math.PI / 6} // -30
            maxAzimuthAngle={0 + Math.PI / 6} // 30
          />
          {/* <Environment preset="sunset" background backgroundBlurriness={0.05} /> */}

          <Html position={[-1, 1, 0]} zIndexRange={[16777271, 0]}>
            <div className="-translate-y-8 translate-x-4 select-none transition-transform duration-200 ease-in-out md:-translate-x-4 lg:-translate-x-8 lg:translate-y-0 xl:-translate-x-16">
              <h2 className="scroll-m-20 text-4xl font-extrabold tracking-tight duration-200 ease-in animate-in fade-in-50 lg:text-5xl">
                Let's Connect
              </h2>
              <Button className="mt-4 cursor-pointer" asChild>
                <Link href="/contact">
                  <IconMail className="mr-2 size-5" />
                  Contact Me
                </Link>
              </Button>
            </div>
          </Html>
          <group position-y={-1}>
            <ContactShadows
              position={[0, 0, 0]}
              opacity={0.5}
              scale={10}
              blur={1}
              far={50}
              resolution={256}
              color="#0a0a0a"
            />
            <Avatar receiveShadow />
          </group>
          <SpotLight
            position={[-2, 3, 0]}
            intensity={0.5}
            color={theme == "light" ? "#fa0" : "#ffffff"}
            receiveShadow={false}
          />
          <ambientLight intensity={1.5} />
          <directionalLight position={[2, 5, 3]} intensity={1.5} />
        </Suspense>
      </Canvas>
    </div>
  );
};

export default World3D;