How to Pass the correct ID to the modal in reactJs?

Need help guys. the modal is not prompting the correct ID of the data that I want to delete

I have a DataTable.jsx like this below.

import React, { useState, useEffect } from "react";
import axios from "axios";
import DataTable from "react-data-table-component";
import DataTableExtensions from "react-data-table-component-extensions";
import "react-data-table-component-extensions/dist/index.css";
import "bootstrap/dist/js/bootstrap.bundle.js";
import "bootstrap/dist/css/bootstrap.css";
import { Link } from "react-router-dom";
import { AddParameter } from "./AddParameter";
import { DeleteParameter } from "./DeleteParameter";

export const ParameterDataTable = () => {
  const [parameters, setParameters] = useState([]);

  useEffect(() => {
    loadParameters();
  }, []);

  const loadParameters = async () => {
    const result = await axios.get("http://localhost:8080/parameters");
    setParameters(result.data);
  };

  const deleteParam = async (id) => {
    await axios.delete(`http://localhost:8080/parameter/${id}`);
    loadParameters();
  };

  const column = [
    {
      name: "Param Name",
      selector: (row) => row.param_name,
      width: "180px",
      sortable: true,
      alignItems: "center",
      display: "flex",
    },
    {
      name: "Sequence Number",
      selector: (row) => row.param_sequence_number,
      width: "150px",
      sortable: true,
    },
    {
      name: "Parameter Value",
      selector: (row) => row.param_value,
      width: "150px",
      sortable: true,
    },
    {
      name: "Parameter ID",
      selector: (row) => row.param_id,
      width: "150px",
      sortable: true,
    },
    {
      name: "",
      width: "110px",
      cell: (row) => (
        <DeleteParameter deleteParam={deleteParam} row={row.param_id} />
      ),
    },
    {
      name: "",
      width: "110px",
      cell: (row) => (
        <button
          className="btn btn-primary mx-2"
          onClick={() => deleteParam(row.param_id)}
        >
          Edit
        </button>
      ),
    },
  ];

  return (
    <div className="datatable">
      <DataTableExtensions
        columns={column}
        data={parameters}
        print={false}
        export={false}
      >
        <DataTable
          title="Parameters"
          columns={column}
          data={parameters}
          pageSize={5}
          pagination
          fixedHeader
          fixedHeaderScrollHeight="450px"
          highlightOnHover
          actions={<AddParameter loadParameters={loadParameters} />}
        />
      </DataTableExtensions>
    </div>
  );
};

which resulted below

and I have a DeleteParameter.jsx file which is a modal that confirms if the user wants the records to be removed. the modal will show after the Delete button is clicked

import React from "react";
import "bootstrap/dist/js/bootstrap.bundle.js";
import "bootstrap/dist/css/bootstrap.css";

export const DeleteParameter = (props) => {
  return (
    <div className="App">
      <div className="openbtn text-center">
        <button
          type="button"
          class="btn btn-danger"
          data-bs-toggle="modal"
          data-bs-target="#myModal"
        >
          Delete
        </button>

        <div className="modal" tabindex="-1" id="myModal">
          <div className="modal-dialog">
            <div className="modal-content">
              <div className="modal-header">
                <h5 className="modal-title">Remove?</h5>
                <button
                  type="button"
                  className="btn-close"
                  data-bs-dismiss="modal"
                  aria-label="Close"
                ></button>
              </div>
              <div className="modal-body">
                <p>
                  Do you want to remove this record premanently? {props.row}
                </p>
              </div>
              <div className="modal-footer">
                <button
                  type="button"
                  className="btn btn-secondary"
                  data-bs-dismiss="modal"
                >
                  No
                </button>
                <button
                  type="button"
                  className="btn btn-primary"
                  onClick={() => props.deleteParam(props.row)}
                  data-bs-dismiss="modal"
                >
                  Yes
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

the problem is when I’m trying to delete the second record on this table which in this case
the record having 76 as ID. the modal always gets the top ID of the table.

I print the ID to the modal for checking.
The Modal is prompting the 75 instead of the 76

What am I missing here, I tried passing the row.param_id as props, but still it’s not working.

Edit:
It always gets the ID of the first records in the data table, tried it when I sort the data table columns and click delete on any records, it will prompt the first ID of the data Table.