I can't see any shadows in r3f

Question

I'm trying to create a shadow using a react-three-fiber, but I can't see it. What's the problem? I'll attach a part of the code

I added castShadow to lighting and reciveShadow and castShadow to models

return(
        <>
            <OrbitControls/>
            <axesHelper args={[500, 500, 500]} /> 
            <Environment preset="sunset" background />
            <directionalLight
                ref={directionalLightRef}
                intensity={1}
                position={[-250,200,0]}
                color={"#fdfbfb"}
                castShadow 
            />
            <group>
                <primitive
                    object={office_objects.scene} 
                    scale={1.1}
                    position={[100,-2,0]}
                    castShadow receiveShadow
                />
                <primitive
                    object={floor.scene} 
                    scale={1.1}
                    position={[100,0,0]}
                    receiveShadow
                /> 
                <primitive
                    object={monitor.scene} 
                    scale={1.1}
                    position={[100,-0.5,0]}
                    castShadow receiveShadow
                    onClick={handleModelClick} 
                /> 
            </group> 
           </>
    );
}

and added shadows to Canvas

<Canvas 
        shadows
        camera = {{
          position: [300,100,0],
          near: 10,
          far: 1000
        }} 
      >

I tried to add shadowMap to Canvas. but still can't see shadows.

<Canvas 
        shadowMap
        camera = {{
          position: [300,100,0],
          near: 10,
          far: 1000
        }} 
      >

Answer 1

I solved the problem with traverse()

useEffect(() => {
    office_objects.scene.traverse(child => {
        if (child.isMesh) {
            child.castShadow = true;
            child.receiveShadow = true;
        }
    });

    floor.scene.traverse(child => {
        if (child.isMesh) {
            child.receiveShadow = true;
        }
    });

    monitor.scene.traverse(child => {
        if (child.isMesh) {
            child.castShadow = true;
            child.receiveShadow = true;
        }
    });

}, [office_objects, floor, monitor]);

I didn't put castShadow and recieveShadow on the primitive tag, but set castShadow and recieveShadow on the model's child one by one