How to store video url in usestate and pass it to video popup modal react js

I get a response from API and pass it to the react js.

API response

    Array(80)
    0:
    Camera_Number: "Camera_1"
    Company_Name: "Fraction Analytics Limited"
    Floor Number: "Ground_Floor"
    Group_Name: "Group_1"
    Video_Name: "http://localhost:4000/video/0"
    [[Prototype]]: Object
    
    1:
    Camera_Number: "Camera_2"
    Company_Name: "Fraction Analytics Limited"
    Floor Number: "Ground_Floor"
    Group_Name: "Group_1"
    Video_Name: "http://localhost:4000/video/1"
    [[Prototype]]: Object

After getting a response populated API data to the react-ag grid.

App.js

    import video from "./video_2.mp4";
   ....... 
    export default function App(data, handleFormSubmit) {
      const { id } = data;
      const actionButton = (params) => {
        setOpen(true);
      };
      const [open, setOpen] = React.useState(false);
      const [setFormData] = useState(initialValue);
      const handleClose = () => {
        setOpen(false);
        setFormData(initialValue);
      };
      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);
            params.api.applyTransaction({ add: resp.results });
          });
      };
      return (
        <div className="App">
          <div>
            <Dialog
              open={open}
              onClose={handleClose}
            >

          {/* Issue is Here */}
          <DialogContent>
            <iframe width="420" height="315" title="videos" src={video} />
          </DialogContent>
          {/* Issue is Here */}

        </Dialog>
      </div>
    </div>
  );
}

I used this code to call API and populate external API data to react js. Now the problem is to assign only one video to the source located in the project directory.

      <DialogContent>
       
       <iframe width="420" 
        height="315" 
        title="videos" 
        src={video} />
    
     </DialogContent>

Video_Name:"http://localhost:4000/video/0" , Video_Name:"http://localhost:4000/video/1"

How to assign the above multiple video URLs to the source(src) which I got from API.

Thanks