preciso criar um filtro de atendimentos pelo id do procedure exemplo: 8f55ed9f-971c-452e-b97d-24783082bad3

{
    "success": true,
    "result": {
        "total": 1,
        "skipped": 0,
        "limited": 10,
        "list": [
            {
                "createdAt": "2025-02-21T03:08:41.336Z",
                "updatedAt": "2025-03-17T23:13:34.151Z",
                "related": {
                    "patient": {
                        "createdAt": "2025-02-06T16:51:49.937Z",
                        "updatedAt": "2025-02-06T16:51:49.937Z",
                        "name": "dfdfsd",
                        "cpf": "1234657987",
                        "address": "endereço",
                        "gender": "",
                        "birthday": "2025-02-06",
                        "phone": "(11) 98756-5242",
                        "email": "email@gmail.com",
                        "payments": [],
                        "__v": 0,
                        "id": "162060a8-a250-4fda-b9b6-192096b7338d"
                    },
                    "payer": {
                        "createdAt": "2025-02-17T16:03:26.916Z",
                        "updatedAt": "2025-02-17T16:03:26.916Z",
                        "place": false,
                        "payer": true,
                        "name": "convenio platium",
                        "cnpj": "12316546121654",
                        "email": "platinum.01@gmail.com",
                        "phone": "11985635713245",
                        "address": {
                            "street": "rua algoritimo",
                            "city": "sao joao",
                            "state": "sp",
                            "zipcode": "1232154654879",
                            "number": "25"
                        },
                        "active": true,
                        "__v": 0,
                        "id": "3a8b47e0-3545-4389-8f7e-379b23ad3ef4"
                    },
                    "place": {
                        "createdAt": "2025-02-17T16:06:44.076Z",
                        "updatedAt": "2025-02-17T16:06:44.076Z",
                        "place": true,
                        "payer": false,
                        "name": "hospital postinho rosa",
                        "cnpj": "1321546876546",
                        "email": "postinho.rosa@gmail.com",
                        "phone": "11987585642",
                        "address": {
                            "street": "rua limaoAzul",
                            "city": "galicoro",
                            "state": "sp",
                            "zipcode": "1324654613263",
                            "number": "26"
                        },
                        "active": true,
                        "__v": 0,
                        "id": "9172adf2-1207-49e5-9130-fe259e8e08cf"
                    }
                },
                "paymentInfo": {
                    "method": "private",
                    "info": {
                        "totalSum": 1586.81,
                        "healthInsurance": {
                            "cardNumber": ""
                        },
                        "totalValues": {
                            "expected": 231.23,
                            "glossed": 1.23,
                            "lost": 1231.23,
                            "paid": 123.12
                        },
                        "totalProcedures": {
                            "expected": 1,
                            "glossed": 1,
                            "lost": 1,
                            "paid": 1
                        }
                    }
                },
                "serviceInfo": {
                    "guideCode": "",
                    "date": "2025-02-05T00:00:00.000Z",
                    "totalValue": 0
                },
                "procedures": [
                    {
                        "id": "8f55ed9f-971c-452e-b97d-24783082bad3",
                        "cbhpmName": "tetetete",
                        "cbhpmCode": "teste",
                        "expectedValue": 231.23,
                        "glossedValue": 1.23,
                        "lostValue": 1231.23,
                        "paidValue": 123.12,
                        "payerId": "",
                        "placeId": "",
                        "patientId": "",
                        "statusOfActivity": "readyToValidate",
                        "attachments": [],
                        "createdAt": "2025-02-21T03:08:17.267Z",
                        "updatedAt": "2025-02-21T03:08:17.267Z"
                    }
                ],
                "status": {
                    "glossed": false,
                    "lost": false,
                    "received": false,
                    "draft": false,
                    "validated": false,
                    "derived": false,
                    "finished": false
                },
                "__v": 0,
                "id": "e8ea3529-0d46-4cdb-adf4-df6727636ff9"
            }
        ]
    }
}{
    "success": true,
    "result": {
        "total": 1,
        "skipped": 0,
        "limited": 10,
        "list": [
            {
                "createdAt": "2025-02-21T03:08:41.336Z",
                "updatedAt": "2025-03-17T23:13:34.151Z",
                "related": {
                    "patient": {
                        "createdAt": "2025-02-06T16:51:49.937Z",
                        "updatedAt": "2025-02-06T16:51:49.937Z",
                        "name": "dfdfsd",
                        "cpf": "1234657987",
                        "address": "endereço",
                        "gender": "",
                        "birthday": "2025-02-06",
                        "phone": "(11) 98756-5242",
                        "email": "email@gmail.com",
                        "payments": [],
                        "__v": 0,
                        "id": "162060a8-a250-4fda-b9b6-192096b7338d"
                    },
                    "payer": {
                        "createdAt": "2025-02-17T16:03:26.916Z",
                        "updatedAt": "2025-02-17T16:03:26.916Z",
                        "place": false,
                        "payer": true,
                        "name": "convenio platium",
                        "cnpj": "12316546121654",
                        "email": "platinum.01@gmail.com",
                        "phone": "11985635713245",
                        "address": {
                            "street": "rua algoritimo",
                            "city": "sao joao",
                            "state": "sp",
                            "zipcode": "1232154654879",
                            "number": "25"
                        },
                        "active": true,
                        "__v": 0,
                        "id": "3a8b47e0-3545-4389-8f7e-379b23ad3ef4"
                    },
                    "place": {
                        "createdAt": "2025-02-17T16:06:44.076Z",
                        "updatedAt": "2025-02-17T16:06:44.076Z",
                        "place": true,
                        "payer": false,
                        "name": "hospital postinho rosa",
                        "cnpj": "1321546876546",
                        "email": "postinho.rosa@gmail.com",
                        "phone": "11987585642",
                        "address": {
                            "street": "rua limaoAzul",
                            "city": "galicoro",
                            "state": "sp",
                            "zipcode": "1324654613263",
                            "number": "26"
                        },
                        "active": true,
                        "__v": 0,
                        "id": "9172adf2-1207-49e5-9130-fe259e8e08cf"
                    }
                },
                "paymentInfo": {
                    "method": "private",
                    "info": {
                        "totalSum": 1586.81,
                        "healthInsurance": {
                            "cardNumber": ""
                        },
                        "totalValues": {
                            "expected": 231.23,
                            "glossed": 1.23,
                            "lost": 1231.23,
                            "paid": 123.12
                        },
                        "totalProcedures": {
                            "expected": 1,
                            "glossed": 1,
                            "lost": 1,
                            "paid": 1
                        }
                    }
                },
                "serviceInfo": {
                    "guideCode": "",
                    "date": "2025-02-05T00:00:00.000Z",
                    "totalValue": 0
                },
                "procedures": [
                    {
                        "id": "8f55ed9f-971c-452e-b97d-24783082bad3",
                        "cbhpmName": "tetetete",
                        "cbhpmCode": "teste",
                        "expectedValue": 231.23,
                        "glossedValue": 1.23,
                        "lostValue": 1231.23,
                        "paidValue": 123.12,
                        "payerId": "",
                        "placeId": "",
                        "patientId": "",
                        "statusOfActivity": "readyToValidate",
                        "attachments": [],
                        "createdAt": "2025-02-21T03:08:17.267Z",
                        "updatedAt": "2025-02-21T03:08:17.267Z"
                    }
                ],
                "status": {
                    "glossed": false,
                    "lost": false,
                    "received": false,
                    "draft": false,
                    "validated": false,
                    "derived": false,
                    "finished": false
                },
                "__v": 0,
                "id": "e8ea3529-0d46-4cdb-adf4-df6727636ff9"
            }
        ]
    }
}

como fazer isto neste componente? estou fazendo o get de todos os atendimentos no useeffect

import React, { useEffect, useState } from "react";
import EstiloNovoAtendimento from "./NovoAtendimento.module.css";
import { AppointmentRequestDTO, ProcedureDTO } from "./types";
import Anexo from "../ui/Anexo";
import { useApi } from "@/lib/doctorApi";

interface Procedimento {
  procedure: ProcedureDTO;
  index: number;
  updateProcedimento: (index: number, novosDados: ProcedureDTO) => void;
  handleExcluir: (id: string) => void; // Função para excluir um procedimento
}

const EditarProcedimento: React.FC<Procedimento> = ({
  procedure,
  index,
  updateProcedimento,
  handleExcluir,
}) => {
  const [procedimento, setProcedimento] = useState<ProcedureDTO>({
    ...procedure,
  });
  const [isEditable, setIsEditable] = useState(false); // Estado para controle de edição

  const [expectedValue, setExpectedValue] = useState("0,00");
  const [glossedValue, setGlossedValue] = useState("0,00");
  const [paidValue, setPaidValue] = useState("0,00");
  const [lostValue, setLostValue] = useState("0,00");
  const api = useApi();
  const [appointments, setAppointments] = useState<AppointmentRequestDTO[]>([]);

  useEffect(() => {
    setExpectedValue(
      (procedimento.expectedValue || 0).toLocaleString("pt-BR", {
        minimumFractionDigits: 2,
      })
    );
    setGlossedValue(
      (procedimento.glossedValue || 0).toLocaleString("pt-BR", {
        minimumFractionDigits: 2,
      })
    );
    setPaidValue(
      (procedimento.paidValue || 0).toLocaleString("pt-BR", {
        minimumFractionDigits: 2,
      })
    );
    setLostValue(
      (procedimento.lostValue || 0).toLocaleString("pt-BR", {
        minimumFractionDigits: 2,
      })
    );
  }, [procedimento]);

  const handleValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const inputValue = e.target.value;
    const name = e.target.name;

    const numericValue = inputValue.replace(/[^\d]/g, "").trim();
    const parsedValue =
      numericValue.length > 0 ? parseFloat(numericValue) / 100 : 0;

    const formattedValue = parsedValue.toLocaleString("pt-BR", {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    });

    setProcedimento((prevProcedimento) => ({
      ...prevProcedimento,
      [name]: parsedValue,
    }));

    if (name === "expectedValue") {
      setExpectedValue(formattedValue);
    } else if (name === "glossedValue") {
      setGlossedValue(formattedValue);
    } else if (name === "paidValue") {
      setPaidValue(formattedValue);
    } else if (name === "lostValue") {
      setLostValue(formattedValue);
    }
  };

  const handleEditClick = () => {
    setIsEditable(true);
    console.log("lapis clicado do editar procedimento");
  };

  useEffect(() => {
      const fetchAppointments = async () => {
        //setLoading(true);
        const params = new URLSearchParams();
        params.append("skip", "0");
        params.append("limit", "40");
  
      
  
        try {
          const response = await api.get(
            `/appointments/find?${params.toString()}`
          );
          if (Array.isArray(response.data.result.list)) {
            setAppointments(response.data.result.list);
            console.log("EditarProcedimento atendimentos carregados com sucesso:", response.data.result.list);
          } else {
            throw new Error("A resposta não contém uma lista de atendimentos.");
          }
        } catch (error) {
          //console.error("Erro ao carregar atendimentos:", error);
          //setError(error instanceof Error ? error.message : "Erro desconhecido");
        } 
      }; 

      fetchAppointments();
    }, []);

  const handleCancelClick = () => {
    setProcedimento({ ...procedure }); // Reseta o procedimento para o estado original
    setIsEditable(false);
  };

  const handleConfirmClick = () => {
    updateProcedimento(index, procedimento); // Atualiza o procedimento
    setIsEditable(false); // Desabilita edição
  };

  const statusMap: { [key: string]: string } = {
    draft: "Rascunho",
    readyToValidate: "Pronto para Validação",
    validated: "Validado",
    toDerive: "Para Faturar",
    derived: "Faturado",
    finished: "Finalizado",
  };

  const currentStatus = procedimento.statusOfActivity;

  const handleStatusChange = (
    status:
      | "draft"
      | "glossed"
      | "validated"
      | "toDerive"
      | "derived"
      | "lost"
      | "finished"
  ) => {
    if (isEditable) {
      setProcedimento((prev) => ({
        ...prev,
        statusOfActivity: prev.statusOfActivity === status ? "draft" : status, // Se já está ativo, troque para "draft"; senão, atualize para o novo status
      }));
    }
  };

  return (
    <div className={EstiloNovoAtendimento.Card}>
      <div className={EstiloNovoAtendimento.CardTop}>
        <div>
          <span className={EstiloNovoAtendimento.id}>ID: {procedure.id}</span>
        </div>
        <div className={EstiloNovoAtendimento.buttonCard}>
          <button onClick={() => handleExcluir(procedure.id)}>
            <img
              src="/lixeira.png"
              alt="Excluir"
              className={EstiloNovoAtendimento.icon}
            />
          </button>
          <button onClick={handleEditClick}>
            <img
              src="/lapisEditor.png" // Ícone do lápis
              alt="Editar"
              className={EstiloNovoAtendimento.icon}
            />
          </button>
        </div>
      </div>

      <div className={EstiloNovoAtendimento.divDoCard}>
        <div className={EstiloNovoAtendimento.organizadorCard}>
          <span>Código personalizado da CBHPM</span>
          <input
            className={`${EstiloNovoAtendimento.inputCard} ${
              isEditable ? EstiloNovoAtendimento.inputEditable : ""
            }`}
            type="text"
            value={procedimento.cbhpmCode}
            placeholder="Digite o Código..."
            onChange={(e) => {
              const value = e.target.value;
              setProcedimento((prevProcedimento) => ({
                ...prevProcedimento,
                cbhpmCode: value,
              }));
            }}
            disabled={!isEditable} // Torna o campo não editável se não estiver em modo de edição
          />
        </div>
        <div className={EstiloNovoAtendimento.organizadorCard}>
          <span>Nome personalizado da CBHPM</span>
          <input
            className={`${EstiloNovoAtendimento.inputCard} ${
              isEditable ? EstiloNovoAtendimento.inputEditable : ""
            }`}
            type="text"
            value={procedimento.cbhpmName}
            placeholder="Digite o Nome..."
            onChange={(e) => {
              const value = e.target.value;
              setProcedimento((prevProcedimento) => ({
                ...prevProcedimento,
                cbhpmName: value,
              }));
            }}
            disabled={!isEditable} // Torna o campo não editável se não estiver em modo de edição
          />
        </div>

        <div className={EstiloNovoAtendimento.divflex}>
          <div className={EstiloNovoAtendimento.valores}>
            <label className={EstiloNovoAtendimento.labelinput}>
              Valor Previsto
            </label>
            <input
              className={`${EstiloNovoAtendimento.inputValor234} ${
                isEditable ? EstiloNovoAtendimento.inputValor : ""
              }`}
              type="text"
              name="expectedValue"
              value={expectedValue}
              placeholder="0,00"
              onChange={handleValueChange}
              disabled={!isEditable} // Torna o campo não editável se não estiver em modo de edição
            />
          </div>
          <div className={EstiloNovoAtendimento.valores}>
            <label className={EstiloNovoAtendimento.labelinput}>
              Valor Glosado
            </label>
            <input
              className={`${EstiloNovoAtendimento.inputValor234} ${
                isEditable ? EstiloNovoAtendimento.inputValor : ""
              }`}
              type="text"
              name="glossedValue"
              value={glossedValue}
              placeholder="0,00"
              onChange={handleValueChange}
              disabled={!isEditable} // Torna o campo não editável se não estiver em modo de edição
            />
          </div>
          <div className={EstiloNovoAtendimento.valores}>
            <label className={EstiloNovoAtendimento.labelinput}>
              Valor Perdido
            </label>
            <input
              className={`${EstiloNovoAtendimento.inputValor234} ${
                isEditable ? EstiloNovoAtendimento.inputValor : ""
              }`}
              type="text"
              name="lostValue"
              value={lostValue}
              placeholder="0,00"
              onChange={handleValueChange}
              disabled={!isEditable} // Torna o campo não editável se não estiver em modo de edição
            />
          </div>
          <div className={EstiloNovoAtendimento.valores}>
            <label className={EstiloNovoAtendimento.labelinput}>
              Valor Pago
            </label>
            <input
              className={`${EstiloNovoAtendimento.inputValor234} ${
                isEditable ? EstiloNovoAtendimento.inputValor : ""
              }`}
              type="text"
              name="paidValue"
              value={paidValue}
              placeholder="0,00"
              onChange={handleValueChange}
              disabled={!isEditable} // Torna o campo não editável se não estiver em modo de edição
            />
          </div>
        </div>

        <Anexo
          attachments={procedimento.attachments}
          setAttachments={(novosAnexos) => {
            setProcedimento((prev) => ({
              ...prev,
              attachments: novosAnexos,
            }));
          }}
          isEditable={isEditable} // Passando o estado de edição para Anexo
        />

        <label className={EstiloNovoAtendimento.labelStatus}>
          Status de pagamento:
        </label>
        <div className={EstiloNovoAtendimento.divflex}>
          {procedure.expectedValue > 0 && (
            <label className={EstiloNovoAtendimento.statusPagamento}>
              <img
                src="/cifrao.png"
                alt=""
                className={EstiloNovoAtendimento.iconStatus}
              />
              Previsto
            </label>
          )}
          {procedure.glossedValue > 0 && (
            <label className={EstiloNovoAtendimento.statusPagamento}>
              <img
                src="/cifrao.png"
                alt=""
                className={EstiloNovoAtendimento.iconStatus}
              />
              Glosado
            </label>
          )}
          {procedure.paidValue > 0 && (
            <label className={EstiloNovoAtendimento.statusPagamento}>
              <img
                src="/cifrao.png"
                alt=""
                className={EstiloNovoAtendimento.iconStatus}
              />
              Valor Pago
            </label>
          )}
          {procedure.lostValue > 0 && (
            <label className={EstiloNovoAtendimento.statusPagamento}>
              <img
                src="/cifrao.png"
                alt=""
                className={EstiloNovoAtendimento.iconStatus}
              />
              Valor Perdido
            </label>
          )}
        </div>

        <label className={EstiloNovoAtendimento.labelStatus}>
          Status de atividade:
        </label>
        <div className={EstiloNovoAtendimento.divflex}>
          {Object.keys(statusMap).map((statusItem) => (
            <label
              key={statusItem}
              className={`${EstiloNovoAtendimento.labelBorda} ${
                isEditable ? EstiloNovoAtendimento.labelBordaEditavel : ""
              }`}
            >
              <input
                type="checkbox"
                className={EstiloNovoAtendimento.customCheckbox}
                value={statusItem}
                checked={currentStatus === statusItem} // Verifica se o status está incluído
                onChange={() => handleStatusChange(statusItem as any)} // Altera para este status, permitindo apenas um a ser ativo
                disabled={!isEditable} // Desabilita se não estiver em modo editável
              />
              <span className={EstiloNovoAtendimento.labelAtividade}>
                {statusMap[statusItem]}
              </span>
            </label>
          ))}
        </div>
      </div>

      {/* Botões de "Confirmar" e "Cancelar" */}
      {isEditable && (
        <div className={EstiloNovoAtendimento.CardBotton}>
          <button onClick={handleConfirmClick}>Confirmar</button>
          <button onClick={handleCancelClick}>Cancelar</button>
        </div>
      )}
    </div>
  );
};

export default EditarProcedimento;