Moving room at location 7 & 8, 0.5 Y units apart on each click

Questions
,
1

Hi there, I’m having some issues here with my new button function.
My question is “Which function i should add in the “Button+2” to make a gap like that(by clicking)”
gap

Here’s the sandbox link: 4 thhhhhhhhhhhhh - CodeSandbox

The default position for items 7 & 8 is:

    [-7.2, -8.1, 3.6],
    [-3.6, -8.11, 7.2]

Now I want to do, When the Button+2 is clicked 1st time the Y position will change to:

    [-7.2, -8.1 - 0.5 * 2, 3.6],
    [-3.6, -8.11 - 0.5 * 2, 7.2]

and so forth

Here’s my main file code:

import React, { Suspense, useEffect, useMemo, useRef, useState } from "react";

import { Canvas } from "@react-three/fiber";
import { ContactShadows, OrbitControls, useGLTF } from "@react-three/drei";

import "./PartOne.css";
import { RoomOne } from "../assets/Room1";
import { Room2 } from "../assets/Room2";
import { Room3 } from "../assets/Room3";
import { Room4 } from "../assets/Room4";
import { Room5 } from "../assets/Room5";
import { Room6 } from "../assets/Room6";
import { Room7 } from "../assets/Room7";
import { Room8 } from "../assets/Room8";

const PartOne = () => {
  const [rooms, setRooms] = useState([
    RoomOne,
    Room2,
    Room3,
    Room4,
    Room5,
    Room6,
    Room7,
    Room8
  ]);
  const positions = useMemo(() => [
    [0.0, 0.0, 0.0],
    [-3.6, -2.7, 0.0],
    [-0.0, -2.7, 3.6],
    [-7.2, -5.4, 0.0],
    [-3.6, -5.4, 3.6],
    [-0.0, -5.4, 7.2],
    [-7.2, -8.1, 3.6],
    [-3.6, -8.11, 7.2]
  ]);
  useEffect(() => {
    console.log("rooms state:", rooms);
  }, [rooms]);

  const rotate = function (arr, numberOfShifts) {
    let tmp = 0;
    const leng = arr.length;
    numberOfShifts = numberOfShifts % leng;
    for (let i = 0; i < numberOfShifts; i++) {
      tmp = arr.pop();
      arr.unshift(tmp);
    }
    return arr;
  };

  return (
    <div className="wrapper">
      <button
        onClick={() => {
          let arr = [...rooms];
          rotate(arr, 1);
          console.log("arr::", arr);
          setRooms(arr);
        }}
      >
        Button +1
      </button>

      <button
        onClick={() => {
          let arr = [...rooms];
          rotate(arr, 2);
          console.log("arr::", arr);
          setRooms(arr);
        }}
      >
        Button +2
      </button>

      <Canvas shadows camera={{ fov: 70, position: [0, 0, 30] }}>
        <Suspense fallback={null}>
          <ambientLight intensity={0.3} />
          <directionalLight
            castShadow
            receiveShadow
            intensity={0.5}
            position={[-80, 50, -85]}
            shadow-normalBias={0.1}
            shadow-camera-left={-12}
            shadow-camera-right={12}
            shadow-camera-top={12}
            shadow-camera-bottom={-12}
            shadow-camera-near={0.5}
            shadow-camera-far={200}
          />
          <directionalLight
            castShadow
            receiveShadow
            intensity={1}
            position={[30, 100, 90]}
            shadow-normalBias={0.1}
            shadow-camera-left={-12}
            shadow-camera-right={12}
            shadow-camera-top={12}
            shadow-camera-bottom={-12}
            shadow-camera-near={0.5}
            shadow-camera-far={200}
          />
          {console.log("rooms render", rooms)}
          {rooms.map((room, roomIndex) =>
            room({ position: positions[roomIndex] })
          )}
          <ContactShadows />
        </Suspense>
        <OrbitControls enablePan={true} enableZoom={true} enableRotate={true} />
      </Canvas>
    </div>
  );
};

export default PartOne;

Thank You so much.