title: React three fiber Shadow material not working
body: <p>The following is the code, the spinning mesh are not casting any shadows on the shadow material.
  The planeBufferGeometry seems to be there. -----------------------------------------------------------------------------------------------------------------------------------------------------------------------</p>
  <pre><code>import React from 'react';
  import './App.scss';
  import {Canvas, useFrame} from 'react-three-fiber';
  
  
  const SpinningMesh = ({position, args, color}) =&gt; {
  
    const mesh = React.useRef(null);
    useFrame(()=&gt; (mesh.current.rotation.x = mesh.current.rotation.y += 0.01))
  
    return(
          &lt;mesh castShadow ref={mesh} position={position}&gt; 
            &lt;boxBufferGeometry attach='geometry' args={args}/&gt;
            &lt;meshStandardMaterial attach='material' color={color}/&gt;
          &lt;/mesh&gt;
    );
  }
  
  function App() {
  
    return (
      &lt;&gt;
        &lt;Canvas shadowMap colorManagement camera={{position:[-5,2,10], fov:60}}&gt;
          &lt;ambientLight intensity={0.3}/&gt;
          &lt;directionalLight
            castShadow
            position={[0,10,0]}
            intensity={1.5}
            shadow-mapSize-width={1024}
            shadow-mapSize-height={1024}
            shadow-camera-far={50}
            shadow-camera-left = {-10}
            shadow-camera-right = {10}
            shadow-camera-top = {10}
            shadow-camera-bottom = {-10}
          /&gt;
          &lt;pointLight position={[-10,0,-20]} intensity={.5}/&gt;
          &lt;pointLight position={[0,-10,0]} intensity={1.5}/&gt;
  
          &lt;group&gt;
            &lt;mesh receiveShadow rotation={[-Math.PI / 2 , 0 , 0]} position={[0,-3,0]}&gt;
              &lt;planeBufferGeometry attach='geometry' args={[100,100]}/&gt;
              &lt;shadowMaterial attach='material' opacity={0.3} color=&quot;blue&quot;/&gt;
            &lt;/mesh&gt;
          &lt;/group&gt;
  
  
          &lt;SpinningMesh position={[0,1,0]} args={[3,2,1]} color='lightblue'/&gt;
          &lt;SpinningMesh position={[-2,1,-5]} color='pink'/&gt;
          &lt;SpinningMesh position={[5,1,-2]} color='pink'/&gt;
        &lt;/Canvas&gt;
      &lt;/&gt;
    );
  }
  
  export default App;
  
  </code></pre>
  <p><a href="https://i.stack.imgur.com/p8PCk.png" rel="nofollow noreferrer">output</a></p>