const getPatientProceduresID = createAsyncThunk(
  "selectedPatient/getPatientProcedures",
  async (arg, { getState }) => {
    const state = getState();
    const patient = state.selectedPatient.patient;
    const token = state.userDetails.token;

    try {
      const apiUrl = process.env.REACT_APP_API_URL;

      var config = {
        method: "get",
        url: `${apiUrl}/GetProcedures/${patient}`,
        headers: {
          accept: "application/json",
          "Authorization-Token": token,
        },
      };

      const response = await axios(config);
      const data = await response.data;

      return data[0].id;
    } catch (error) {
      console.log(error);
    }
  }
);

export const getPatientProcedureDetails = createAsyncThunk(
  "selectedPatient/getPatientProcedureDetails",
  async (arg, { getState }) => {
    const state = getState();
    const patientID = state.selectedPatient.patient;
    const procedureID = getPatientProceduresID;

    console.log(procedureID());

    const token = state.userDetails.token;

    try {
      const apiUrl = process.env.REACT_APP_API_URL;
      

      var config = {
        method: "get",
        url: `${apiUrl}/GetProcedureDetail/${patientID}/${procedureID}`,
        
        headers: {
          accept: "application/json",
          "Authorization-Token": token,
        },
      };

      const response = await axios(config);
      const data = await response.data;
      return data;
    } catch (error) {
      console.log(error);
    }
  }
);

When I console.log procedureID, it returns the whole function instead of the result. What am I doing wrong? I need to use the result of the first variable in the second, because it contains the procedure id that I need for "${apiUrl}/GetProcedureDetail/${patientID}/${procedureID}"