Getting response from API. API response

Group_Name: "Group_1"
Video_Name: "http://localhost:4000/video/0"

After populating data to table create one button then ag-grid look like this

Then call API using fetch.after that stores response in usestate, I am currently mapping through all the videos to button and II click button it opens multiple video but I want only one video at a time but I don’t know how to properly play one at a time. I appreciate any help. I’ve been stuck on this for a few days.

app.js

export default function App(data, handleFormSubmit) {
  const { id } = data;
  const actionButton = (params) => {
    setOpen(true);
  };
  const [response, setResponse] = useState([]);
  const [open, setOpen] = React.useState(false);
  const [formData, setFormData] = useState(initialValue);
  const handleClose = () => {
    setOpen(false);

    response.map(({ Video_Name }) => videoName);

    setFormData(initialValue);
    console.log(videoName);
  };

  const onChange = (e) => {
    const { value, id } = e.target;
    // console.log(value,id)
    setFormData({ ...formData, https://stackoverflow.com/q/72487878: value });
  };

  const columnDefs = [
    { headerName: "Name", field: "Company_Name", filter: "agSetColumnFilter" },
    { headerName: "Floor", field: "Floor Number" },
    { headerName: "Group", field: "Group_Name" },
    { headerName: "Camera", field: "Camera_Number" },
    { headerName: "Videos", field: "Video_Name" },
    {
      headerName: "Actions",
      field: "Video_Name",
      cellRendererFramework: (params) => (
        <div>
          <Button
            variant="contained"
            size="medium"
            color="primary"
            onClick={() => actionButton(params)}
          >
            Play
          </Button>
        </div>
      ),
    },
  ];

  const onGridReady = (params) => {
    console.log("grid is ready");
    fetch("http://localhost:8000/get_all")
      .then((resp) => resp.json())
      .then((resp) => {
        console.log(resp.results);
        setResponse(resp.results);
        params.api.applyTransaction({ add: resp.results });
      });
  };
  return (
    <div className="App">
      <h1 align="center"> React FastAPI Integration</h1>
      <h3> API Data </h3>
      <div className="ag-theme-alpine" style={{ height: "400px" }}>
        <AgGridReact
          columnDefs={columnDefs}
          defaultColDef={defaultColDef}
          onGridReady={onGridReady}
          pagination={true}
        ></AgGridReact>
      </div>
      <div>
        <Dialog
          open={open}
          onClose={handleClose}
          aria-labelledby="alert-dialog-title"
          aria-describedby="alert-dialog-description"
        >

      <DialogContent>
        {response.map(({ Video_Name }) => (
          <iframe
            width="420"
            height="315"
            title="videos"
            src={Video_Name}
          />
        ))}
      </DialogContent>
          
        </Dialog>
      </div>
    </div>
  );
}

Multiple video open at same time,I don’t know how to properly play one at a time. I appreciate any help. I’ve been stuck on this for a few days.

Multiple video open at a time. but i want one video at a time

Thanks in advance