Disable react three fiber canvas scale up transition to fit container - reactjs

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