Disable react three fiber canvas scale up transition to fit container

Question

I try to build a sort of gallery that includes images and a 3d model of a tshirt. To do so i display the pictures of the shirt first then a button toggle the rendering of the 3d model. I know react-three-fiber canvas adapts to fill its closest parent but when the 3d model renders it starts to scale up gradually to fill the parent div. This behavior result in a bad UX. How can i remove that scale transition to display the model as i click the button ? I already tried debounce on the canvas but that just speed up the transition. Here's the code.

<div
  class="container"
  style={{
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    width: "100%",
    height: "100%"
  }}
>
  <div
    class="grid"
    style={{
      maxWidth: "30rem",
      display: "grid",
      gridTemplateColumns: "1fr",
      gap: "20px"
    }}
  >
    <div
      style={{
        display: "flex",
        aspectRatio: "1/1",
        width: "100%",
        overflow: "hidden",
        justifyContent: "center",
        border: "1px solid black"
      }}
    >
      {is3d ? (
        <Canvas
          style={{
            overflow: "clip",
            maxWidth: "100%",
            height: "auto",
            display: "block",
            overflowClipMargin: "content-box",
            verticalAlign: "middle"
          }}
          shadows
          dpr={[1, 2]}
          camera={{ fov: 38 }}
        >
          <Suspense fallback={null}>
            <Stage
              controls={ref}
              preset="portrait"
              intensity={1.5}
              environment="studio"
            >
              false
              <Model />
              false
            </Stage>
          </Suspense>
          <OrbitControls
            ref={ref}
            autoRotate={false}
            enablePan={false}
            minPolarAngle={Math.PI / 2.1}
            maxPolarAngle={Math.PI / 2.1}
          />
        </Canvas>
      ) : (
        <img
          style={{
            overflow: "clip",
            maxWidth: "100%",
            height: "auto",
            objectFit: "cover",
            overflowClipMargin: "content-box",
            display: "block",
            verticalAlign: "middle"
          }}
          src={eye}
          alt="image"
        />
      )}
    </div>
    <button onClick={() => (is3d ? setIs3d(false) : setIs3d(true))}>
      3D
    </button>
  </div>
</div>

Take a look at the result here