Mudando o estado mas nao muda o icone

A funcao de favoritar muda o estado do favorito mas n muda o coracao App.js

import { useState } from 'react';
import Banner from './componentes/banner';
import Formulario from './componentes/formulario';
import Integrantes from './componentes/integrantes';
import Rodape from './componentes/rodape';
import Times from './componentes/time';
import { v4 as uuidv4 } from 'uuid';

function App() {

  const cargos = [
    {
      id: uuidv4(),
      cargo: "Server Dev",
      corPrimaria: "#FFBA05",
      corSecundaria: "#FFF5D9"
    },
    {
      id: uuidv4(),
      cargo: "Precoce",
      corPrimaria: "#FF8A29",
      corSecundaria: "#FFEEDF"
    },
    {
      id: uuidv4(),
      cargo: "Server DLC",
      corPrimaria: "#E06B69",
      corSecundaria: "#FDE7E8"
    },
    {
      id: uuidv4(),
      cargo: "Bot",
      corPrimaria: "#57C278",
      corSecundaria: "#D9F7E9"
    },
    {
      id: uuidv4(),
      cargo: "Mara",
      corPrimaria: "#DB6EBF",
      corSecundaria: "#FAE9F5"
    }
  ]

  const inicial = [
    {
      id: uuidv4(),
      favorito: false,
      nome: "Brazilian Samurai",
      imagem: "https://cdn.discordapp.com/avatars/491592828397420555/48587ebc41c5fdb2bc3f8a7b045050b1.webp?size=160",
      cargo: cargos[0].cargo
    }
  ]

  const [integrantes, setIntegrante] = useState(inicial);

  const novoIntegrante = (integrante) => {

    console.log(integrante);
    setIntegrante([...integrantes, integrante]);

  }

  function deletarIntegrante(id) {
    setIntegrante(integrantes.filter(integrante => integrante.id !== id));
  }

  const setFavorito = (id) => {
    setIntegrante(integrantes.map(integrante => {
      if (integrante.id === id) integrante.favorito = !integrante.favorito;
      console.log(integrante.favorito);
      return integrante;
    }))
  }

  return (
    <div className="App">
      <Banner />
      <Formulario cargos={cargos.map(cargo => cargo.cargo)} integranteCadastrado={integrante => novoIntegrante(integrante)} />
      <Integrantes />
      {cargos.map(time => <Times
        setFavorito={setFavorito}
        key={time.id}
        id={time.id}
        nome={time.cargo}
        cor1={time.corPrimaria}
        cor2={time.corSecundaria}
        integrantes={integrantes.filter
          (integrante => integrante.cargo === time.cargo)
        }
        deletar={deletarIntegrante}
      />)}
      <Rodape />
    </div>
  );
}

export default App;

Time.js

import Card from "../card";
import "./time.css"

const Times = ({cor2,cor1,nome,integrantes,deletar,setFavorito}) => {

    return (

        integrantes.length > 0 &&
        <section className="time" style={{
            backgroundColor: cor2
        }}>
            <h3 style={{
                borderColor: cor1
            }}>{nome}</h3>
            <div className="integrantes">
                {integrantes.map(integrante =>
                    <Card
                        key={integrante.id}
                        id={integrante.id}
                        corDeFundo={cor1}
                        nome={integrante.nome}
                        cargo={integrante.cargo}
                        imagem={integrante.imagem}
                        deletar={deletar}
                        setFavorito={setFavorito}
                    />)
                }
            </div>
        </section>
    )

}

export default Times;

Card.js

import { AiFillDelete, AiFillHeart, AiOutlineHeart } from "react-icons/ai"
import "./card.css"

const Card = ({ nome, imagem, cargo, corDeFundo, deletar, id, favorito, setFavorito}) => {

    return (

        <div className="card" key={id}>
            <AiFillDelete
                size={25}
                className="deletar"
                onClick={() => deletar(id)}
            />
            <div className="cabecalho" style={{
                backgroundColor: corDeFundo
            }}>
                <img src={imagem} alt={nome} />
            </div>

            <div className="rodape">
                <h4>{nome}</h4>
                <h5>{cargo}</h5>
                <div className="favoritar">
                    {favorito
                        ? <AiFillHeart size={25} onClick={()=>setFavorito(id)}/>
                        : <AiOutlineHeart size={25} onClick={()=>setFavorito(id)}/>
                    }
                </div>
            </div>
        </div>

    )

}

export default Card