Initial rendered <canvas> not taking up full width and height of parent.

[ms-in2tec]

Hi, my rendered canvas element does not take up the full width and height of its div parent on first render even though the parent div has width and height set to 100%. As soon as I change the viewport dimensions it snaps and sets its width and height correctly. I upgraded the relevant packages but no luck. Any help would be greatly appreciated and thank you in advance!

Dependencies:
react - 18.2.0,
@react-three/drei - 9.121.5 (upgraded from 9.112.0)
@react-three/fiber - 8.17.14 (upgraded from 8.17.6)
three - 0.173.0 (upgraded from 0.169.0)

CanvasContainer.jsx

<Box position="relative" width="100%" height="100%">
    <Canvas style={{ width: '100%', height: '100%' }}>
        <ThreeModel url={url}  />
     </Canvas>
</Box>

ThreeModel.jsx

<Suspense fallback={<CanvasLoader />}>
    <Environment preset="warehouse" />
    <GLTFModel url={url} />
    <OrbitControls maxDistance={200} onChange={handleOrbitControlsChange} />
    <ambientLight intensity={1} />
    <PerspectiveCamera position={[0, 0 ,0]} makeDefault />
</Suspense>

GLTFModel.jsx

const GLTFModel = ({ url }) => {
  const { scene } = useGLTF(url, true);

  return (
    <primitive
      object={scene}
      receiveShadow={false}
      position={[0, 10, -50]}
    />
  );
};

Initial Render:

Child canvas -

Parent div -

After Resize:

Child canvas -

Parent div -