Работа с массивом DOM элементов

const Card = ({ name }) => {
    const [className, setClassName] = useState("card")
 
    function toggleClass(e) {
        setClassName(className === "card" ? "card active" : "card")
    }
 
    const style = {
        backgroundImage: `url(${"https://s0.rbk.ru/v6_top_pics/resized/1024xH/media/img/1/54/754842938381541.jpg"})`
    }
 
    return (
        <section className={className} onClick={toggleClass}>
            <div style={style} className='card-img'></div>
            <div>
                <p className='card-name'>{name}</p>
                <p className='card-condition'>Состояние: новый</p>
                <p className='card-price'>1000 р</p>
                <p className='card-description'>машина ахуенная летает плавает прыгает бегает стреляет</p>
            </div>
        </section>
    )
}
 
export default Card

import React, {useState} from 'react';
import ReactDOM from 'react-dom/client';
import './tmp.css'
 
//
const App = props => {
    const[list, setList] = useState([
        {
            id: 1,
            name: 'Первый'
        },
        {
            id: 2,
            name: 'Второй'
        }
    ])
    const action = getAction(list, setList)
    return (
        <div>
            <button onClick={_ => action()}>Выбрать все</button>
            <ul>
                {list.map(el => <Itm key={el.id} itm={el} action={action} />)}
            </ul>
        </div>
    );
};
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);
 
// Создание функции для элемента
function getAction(list, setList) {
    return function (id){
        const a = list.map(el => {
            if (el.id === id) el.active = !el.active
            if (!id) el.active = true
            return el
        })
        setList(a)
    }
}
 
// Элемент
function Itm({itm, action}) {
    let cls = ['card']
    if (itm.active) cls.push('active')
    cls = cls.join(' ')
    return (
        <li className={cls} onClick={_ => action(itm.id)}>{itm.name}</li>
    );
};

import "./styles.css";
import React from "react";
 
export default function App() {
  const [state, setState] = React.useState([
    { id: 0, active: false },
    { id: 1, active: false },
    { id: 2, active: false },
    { id: 3, active: false }
  ]);
  const update = (id) => {
    state[state.findIndex((e) => e.id === id)].active = true;
    setState([...state]);
  };
  const reset = () => {
    state.forEach((e) => (e.active = false));
    setState([...state]);
  };
 
  return (
    <>
      <div className="box">
        <button onClick={() => reset()}>Reset</button>
      </div>
      <div className="box">
        {state.map((e) => (
          <div
            className={`item ${e.active && "active"}`}
            key={e.id}
            onClick={() => update(e.id)}
          >
            Click Me
          </div>
        ))}
      </div>
    </>
  );
}

  const update = (id) => {
    const item = state[state.findIndex((e) => e.id === id)];
    item.active = !item.active;
    setState([...state]);
  };