javascript – How can this code be adapted to a React JS project ? (animation iOS)

App.js

import React, { useState } from 'react';
import AppTile from './AppTile';
import AppContainer from './AppContainer';
import './style/App.scss';

function App() {
  const [appOpen, setAppOpen] = useState(false);
  const [selectedApp, setSelectedApp] = useState(null);

  const [appTransform, setAppTransform] = useState("");

  const colors = ["#FF6633", "#FFB399", "#FF33FF", "#FFFF99", "#00B3E6", "#E6B333"];

  const handleTileOpen = (index, e) => {
    setSelectedApp(index);
    setAppOpen(true);

    const appTile = e.target.closest('.AppTile');
    const appContainer = document.querySelector('.AppContainer');

    const tileRect = appTile.getBoundingClientRect();
    const containerRect = appContainer.getBoundingClientRect();
    
    const translateX = tileRect.x;
    const translateY = tileRect.y;

    const scaleX = tileRect.width / containerRect.width;
    const scaleY = tileRect.height / containerRect.height;

    const appTransformValue = `translate3d(${translateX}px, ${translateY}px, 0) scale(${scaleX}, ${scaleY})`;
    setAppTransform(appTransformValue);
  }

  const handleTileClose = () => {
    setAppOpen(false);
    setAppTransform("translate3d(0, 0, 0) scale(1, 1)");
  }

  let appTileContainer = "app-tile-container";
  if (appOpen) {
    appTileContainer += " active";
  }
  return (

    <div className="App">
      <div className={appTileContainer}>
        {
          colors.map((color, index) => {
            return (
              <AppTile
                key={index}
                bgColor={color}
                onClick={(e) => handleTileOpen(index, e)} 
              />
            );
          })
        }
      </div>

      <AppContainer
        index={selectedApp}
        appOpen={appOpen}
        appTransform={appTransform}
        bgColor={colors[selectedApp]}
        handleTileClose={handleTileClose} 
      />

    </div>
  );
}

export default App;

AppTile.js

import './style/AppTile.scss';

function AppTile({ bgColor, onClick }) {
  return (
    <div className="AppTile" style={{ background: bgColor }} onClick={ onClick }>
    </div>
  );
}

export default AppTile;

AppContainer.js

 import './style/AppContainer.scss';

function AppContainer({ index, appOpen, appTransform, bgColor, handleTileClose }) {
  let appContainer = "app-container";
  if (appOpen) {
    appContainer += " active";
  }

  return (
    <div className="AppContainer">
      <div className={appContainer} style={{ backgroundColor: bgColor, transform: appTransform }}>
        <h1>Application n° {index + 1}</h1>
        <p>Une application a pour but de fournir une solution ou un service spécifique aux utilisateurs. Elle peut simplifier des tâches, automatiser des processus, faciliter la communication, divertir ou informer les utilisateurs. Les applications offrent une interface conviviale et intuitive pour interagir avec des fonctionnalités spécifiques, permettant aux utilisateurs de réaliser leurs objectifs de manière efficace et agréable.</p>
        <svg width="50" height="50" onClick={handleTileClose}>
          <line x1="0" y1="0" x2="50" y2="50" stroke="black" strokeWidth="2" />
          <line x1="0" y1="50" x2="50" y2="0" stroke="black" strokeWidth="2" />
        </svg>
      </div>
    </div>
  );
}

export default AppContainer;

App.scss

.App {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;

  .app-tile-container {
    width: 500px;
    min-width: 500px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    transform: scale(1);
    transition: transform .3s ease-in-out 0s, visibility 0s linear .3s;
  }

  .app-tile-container.active {
    transform: scale(0.9);
  }
}

AppContainer.scss

.AppContainer {
  .app-container {
    width:100%;
    min-height:100vh;
    position:fixed;
    top:0;
    left:0;
    transform-origin:top left;
    transition: transform .3s ease-in-out 0s, visibility 0s linear .3s;
    visibility:hidden;
    overflow:hidden;

    svg {
      stroke: #fff;
      font-size:24px;
      position: absolute;
      top: 20px;
      right: 20px;
      cursor: pointer;
    }
  }

  .app-container.active {
    visibility:visible;
    transition: transform .3s ease-in-out 0s, visibility .3s linear .0s;
  }
}

AppTile.scss

.AppTile {
  width: 100px;
  height: 100px;
  margin: 20px;
  border-radius: 20px;
  cursor: pointer;
}