title: Shadows in React-Three-Fiber working but cropped in rectangular region for no reason
body: <p>Hi my problem is the following:
  I successfully added shadows to my viewport but those seemed to be cropped inside a certain region. Thank you for your help :-)</p>
  <ul>
  <li><a href="https://i.stack.imgur.com/X2q0V.png" rel="nofollow noreferrer">with crop</a></li>
  <li><a href="https://i.stack.imgur.com/y5Faz.png" rel="nofollow noreferrer">region</a></li>
  </ul>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;Canvas colorManagement shadows&gt;
          &lt;ambientLight intensity={0.1} /&gt;
          &lt;directionalLight intensity={0.5} position={[80, 80, 30]} castShadow /&gt;
          &lt;OrbitControls /&gt;
          &lt;Box castShadow receiveShadow args={[1, 3, 30]} position={[0, 0.2, 0]}&gt;
            &lt;meshStandardMaterial attach="material" color="gray" /&gt;
          &lt;/Box&gt;
          &lt;Box
            castShadow
            rotation={[0, -Math.PI / 2, 0]}
            receiveShadow
            args={[1, 3, 30]}
            position={[0, 0.2, 0]}
          &gt;
            &lt;meshStandardMaterial attach="material" color="gray" /&gt;
          &lt;/Box&gt;
          &lt;Plane
            receiveShadow
            rotation={[-Math.PI / 2, 0, 0]}
            position={[0, -1, 0]}
            args={[100, 100]}
          &gt;
            &lt;meshStandardMaterial attach="material" color="white" /&gt;
          &lt;/Plane&gt;
        &lt;/Canvas&gt;</code></pre>
  </div>
  </div>
  </p>