how to make api call from external file using axios and callbacks and pass param in react

So, Earlier I had done the same thing like the solution in this one. Please refer this one for sandbox

Now I am trying to clean up my code.

I have a delete option in a table, which will delete the entry from the table.

Now I have created a separate an API file where I am writing the API delete method along with the request object and then calling it in my component using callbacks.

PROBLEM: I need to pass a UUID into the api URL. And the way I am doing it, it's getting passed as function() instead of a value param.

So current request URL: http://localhost:8000/api/v1/partnerApi/function%20(uuid)%20%7B%20%20%20%20%20%20%20%20_this.setState(%7B%20%20%20%20%20%20%20%20%20%20alert:%20/*

expected URL: http://localhost:8000/api/v1/partnerApi/534534rsfdsfe54efgd5

api.js

export const partnerApiAccess = {
  deleteAPI,
};


function deleteAPI(uuid, callback, errorCallack) {
  let at = localStorage.getItem("access_token");
  let auth = "Bearer " + at;

  // ! does not work. need to figure out to pass the uuid inside a url

  const requestOptions = {
    method: "DELETE",
    headers: { Authorization: auth },
    url: `${baseUrl}/partnerApi/${uuid}`,
  };

  return axios(requestOptions)
    .then((response) => {
      // handle success
      callback(response.data);
    })
    .catch((error) => {
      // handle error
      console.log("api error", error);
      errorCallack(error);
    });
}

and then the component:

state variables:

this.state = {
      isLoading: true,
      apiInfo: [],
      alert: null,
    };

this is the which is called on click of delete button:

warningWithConfirmAndCancelMessage = () => {
    this.setState({
      alert: (
        <ReactBSAlert
          warning
          style={{ display: "block", marginTop: "-100px" }}
          title="Are you sure?"
          onConfirm={(uuid) => this.successDelete(uuid)}
          onCancel={() => this.cancelDetele()}
          confirmBtnBsStyle="success"
          cancelBtnBsStyle="danger"
          confirmBtnText="Yes, delete it!"
          cancelBtnText="Cancel"
          showCancel
          btnSize=""
        >
          You will not be able to recover this record
        </ReactBSAlert>
      ),
    });
  };

// this is the one where I am calling my API method from api.js

deleteAdminAPInfo = (uuid) => {
    console.log("delete partner api info ----");
    partnerApiAccess.deleteAPI(uuid,
      (res) => {
        console.log("delete partner api info - api response:", res);
        this.setState({
          isLoading: false,
          apiInfo: this.state.apiInfo.filter(
            (info) => res.findIndex((item) => item.uuid === info.uuid) < 0
          ),
        });
      },

      (error) => {
        if (axios.isCancel(error)) {
          console.log("getmdi-Unable to fetch measurementsData", error.message);
          toast.error("Oops! Something went wrong.", {
            position: "top-right",
            autoClose: 5000,
            hideProgressBar: false,
            closeOnClick: true,
            pauseOnHover: true,
            draggable: true,
            progress: undefined,
          });
        } else {
          this.setState({ isLoading: true });
        }
      }
    );
  };

successDelete = (uuid) => {
    this.deleteAdminAPInfo((uuid) => {
      this.setState({
        alert: (
          <ReactBSAlert
            success
            style={{ display: "block", marginTop: "-100px" }}
            title="Deleted!"
            onConfirm={() => this.hideAlert()}
            onCancel={() => this.hideAlert()}
            confirmBtnBsStyle="success"
            btnSize=""
          >
            The record has been deleted.
          </ReactBSAlert>
        ),
      });
    });
  };