How to change the view height in react fiber

Question

I'm new to react three fiber and i have 2 views with the same model ,but when I resize one of the views in css the 3d model also changes it's dimensions. How can I change the view height without changing the 3d model size?

I'm trying to create transition from normal box to box in wireframe. Like in this picture:

Here is my code

import { useEffect, useState, useRef } from "react";
import { Canvas} from "@react-three/fiber";
import {
  Environment,
  Center,
  ContactShadows,
  View,
  OrbitControls,
  PerspectiveCamera
} from "@react-three/drei";

import "./index.css";
import CameraRig from "./CameraRig";
import Floor from "./Floor";
import Box from "./Box";



export default function CanvasModel() {
  // ---RESIZE CANVAS
  const [ortho, set] = useState(false);
  useEffect(() => {
    const interval = setInterval(() => set((state) => !state), 1000);
    return () => clearInterval(interval);
  }, []);

  const container = useRef();
  const view1 = useRef();
  const view2 = useRef();

  return (
    <div ref={container}>
      <div className="view1" ref={view1} />
      <div className="view2" ref={view2} />
      <Canvas
        camera={{ position: [5, 1.3, 0], fov: 70 }}
        className="canvas"
        style={{ position: "fixed" }}
        eventSource={container}
      >
        <CameraRig>
          <Center>
            {/*-------- VIEW1 --------*/}
            <View index={1} track={view1}>
              <color attach={"background"} args={["blueviolet"]} />
              <Environment preset="city" />
              <directionalLight
                castShadow
                position={[0, 10, 0]}
                intensity={1.5}
              />
              <Center>
                <Box />
                <ContactShadows
                  position={[0.4, 0.01, 0]}
                  blur={2.5}
                  scale={20}
                  far={10}
                />
                <OrbitControls />
                <Floor />
              </Center>
            </View>

            {/*-------- VIEW2 --------*/}
            <View index={2} track={view2}>
              <color attach={"background"} args={["red"]} />
              <directionalLight
                castShadow
                position={[0, 10, 0]}
                intensity={1.5}
              />
              <Environment preset="city" />
              <Center>
                <Box />
                <ContactShadows
                  position={[0.4, 0.01, 0]}
                  blur={2.5}
                  scale={20}
                  far={10}
                />
                <Floor />
              </Center>
              <OrbitControls />
            </View>
          </Center>
        </CameraRig>
      </Canvas>
      <div className="page">
        <div className="section">Scroll Dowl</div>
        <div className="section1">Section1</div>
        <div className="section2">Section2</div>
        <div className="section3">Section3</div>
      </div>
    </div>
  );
}

export default function CameraRig({ children }) {
  const group = useRef();
  return (
    <group>
      <PerspectiveCamera >{children}</PerspectiveCamera>
    </group>
  );
}

I'm trying to create transition that is similar to this Airplanes codepen

I got this:

picture