I’m new to React.js and I’m facing a problem while writing a simple slider. How to translate this code into React.js

const box = document.querySelectorAll(".box");
const contents = document.querySelectorAll(".content");
box.forEach((elemBox, indexBox) => {
  elemBox.addEventListener("click", () => {
    if (box.length >= 2) {
      contents.forEach((content, indexContent) => {
        if (indexBox === indexContent) {
          content.classList.add("_active");
        } else {
          content.classList.remove("_active");
        }
      });
    }
    elemBox.remove();
    const container = document.querySelector(".container");
    container.appendChild(elemBox);
  });
  contents[3].classList.add('_active')
});

And here is the code in react where I will render all this

import React, { useEffect, useState } from "react";

export default function Contentlist({ directions }) {
  return (
    <>
      <div className="container">
        {directions?.map((direction) => (
          <div
            className="box"
            style={{ backgroundImage: `url(${direction.img})` }}
            key={direction.id}
          ></div>
        ))}
      </div>
      <div className="container__content">
        {directions?.map((direction) => (
          <div className="content" key={direction.id}>
            <h2 className="title">{direction.title}</h2>
            <p className="description">{direction.description}</p>
            <button>Read More</button>
          </div>
        ))}
      </div>
    </>
  );
}

Please help me figure out how to do this