I have multiple videos got it from API. after getting API response it stored it in useState.

When i click play button particular video, a pop up should appear playing that video in react Js.

export default function App(data, handleFormSubmit) {
  const [Response, setResponse] = useState([]);
  const [videoName, setVideoName] = useState("");
  const [open, setOpen] = React.useState(false);
  const [formData, setFormData] = useState(initialValue);

  const handleClose = () => {
    setOpen(false);
    setFormData(initialValue);
  };

  const onChange = (e) => {
    const { value, id } = e.target;

    setFormData({ ...formData, [id]: value });
  };

  const { id } = data;
  const actionButton = (params) => {
    setVideoName(params.videoName); // I am assuming but need to update videoName here
    setOpen(true);
  };
  const columnDefs = [
    { 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) => {
        setResponse(resp.results);
        params.api.applyTransaction({ add: resp.results });
      });
  };
  return (
          <DialogContent>
            <iframe width="420" height="315" title="videos" src={videoName} />
          </DialogContent>
          );
}

I am using this code to call API and store it in usestate after that pass videoname to playbutton but i didnt play video in popup player

how to resolve this issue using react js

SOURCE CODE