I have cards that are mapped over They all have a toggle button menu and Im trying to figure out how to target the menu's individually since they are controlled by a single part of the state Im not even sure this is possible. But I think it should be right? I have created a simple

CODE

import "./styles.css";
import { Card, Button, Col, Row } from "reactstrap";
import { useState } from "react";

const Items = [
  {
    name: "Test 1",
    ID: 1234
  },
  {
    name: "Test 2",
    ID: 4321
  },
  {
    name: "Test 3",
    ID: 3421
  }
];

export default function App() {
  const [open, setOpen] = useState(Array.from(Items, () => false));

  const toggle = (index, value) => {
    const newOpenState = [...open];
    newOpenState[index] = value ?? !newOpenState[index];
    setOpen(newOpenState);
  };

  return (
    <>
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
      <div style={{ display: "flex", justifyContent: "space-between" }}>
        {Items.map((item, idx) => (
          <Card
            key={idx}
            style={{
              border: "solid",
              borderColor: "#00000",
              margin: "5px",
              width: "150px",
              display: "flex",
              justifyContent: "center"
            }}
          >
            <h1>{item.name}</h1>
            <span style={{ display: "flex" }}>
              {!open[idx] ? (
                <Button
                  isOpen={open[idx]}
                  onClick={() => toggle(idx)}
                  style={{
                    width: "30px",
                    height: "30px",
                    marginTop: "25px",
                    marginLeft: "10px"
                  }}
                >
                  ...
                </Button>
              ) : (
                <Card
                  style={{
                    border: "solid 1px",
                    borderColor: "#00000",
                    margin: "5px"
                  }}
                >
                  <Row>
                    <Col md="12" className="closeMenu">
                      <span className="X" onClick={() => toggle(idx, false)}>
                        X
                      </span>
                    </Col>
                  </Row>
                  <Row>
                    <Col
                      md="12"
                      onClick={() => toggle(idx, false)}
                      className="editCol"
                    >
                      <span
                        className="editName"
                        onClick={() => setOpen(item.ID)}
                      >
                        Edit Name
                      </span>
                    </Col>
                  </Row>
                  <Row>
                    <Col md="12">
                      <span
                        className="deleteForm"
                        onClick={() => handleFormDelete(item.ID)}
                      >
                        Delete
                      </span>
                    </Col>
                  </Row>
                </Card>
              )}
            </span>
          </Card>
        ))}
      </div>
    </>
  );
}