javascript – React / typescript: como usar a key do .map para definir a URL do meu fetch com metodo patch

Estou tentando fazer um patch para uma lista de componentes,onde eu aprovo ou rejeito cada item, estou listando com um map e cada map tem um botão com minha função para fazer o patch porem minha api tem definido cada item com uma URL diferente, e essa URL é condizente com meu ID, que é minha key do map.

const AnalystN2: React.FC = () => {
const url = "http://localhost:3001/api";
const p = useAuth();
const (users, setUsers) = useState<any()>(());
const ids = "1001"


    useEffect(() => {
        fetch(`${url}/users`)
          .then(function (users) {
            return users.json();
          })
          .then(setUsers);
      }, ());


const (cards, setCards) = useState<any()>(());

useEffect(() => {
        fetch(`${url}/cards`)
          .then(function (cards) {
            return cards.json();
          })
          .then(setCards);
      }, (url));

      const aprove = () => {

        fetch(`${url}/cards/${ids}`,{ 
        method: "PATCH",
        headers: {"Content-type" : "application/json"},
        body: JSON.stringify({
    
          status:"aproved"
    
        }), 
      })
        .then(function(cards) {
            return cards.json();
          })
        .then((data) => console.log(data, 'aaaaaaaaaaaaaaaaaaaaa'));
    }
    
    const rejected = ()=>{
    
    fetch(`${url}/cards/${ids}`,{ 
    method: "PATCH",
    headers: {"Content-type" : "application/json"},
    body: JSON.stringify({
    
    status:"rejected"
    
    }), 
    })
    .then(function(cards) { 
      return cards.json();
    })
    .then((data) => console.log(data, 'aaaaaaaaaaaaaa'));
    }
    
              

if (!users.length){
 return (
   <div>
     carregando
   </div>
 )
}

return (
  <>
<header>

      <button onClick={(e)=> {
        p.signOut()
        e.preventDefault()
      }}>
        LogOutt
      </button>

</header>


{
cards.map((card, cards) => {

return <li key={card.id}>
 <h4> status: {card.status} </h4> 
 
 <button onClick={(e)=> { aprove()
}} > Aprovar </button>

<button onClick={(e)=> { rejected()
}} > Rejeitar </button>

</li>  

})
}

Quando eu “seto” meu “id” com o correspondente, ele faz o que eu necessito, agora gostaria de saber como faço para deixar isso para cada objeto listado no map, aceito criticas quanto ao código, estou querendo aprender.