Problemas com renderização do Header e Footer e imagens estáticas

Professor, boa tarde! Tudo certo?

Estou fazendo um projeto pessoal, como base neste curso, somente para fins de prática e não cair no esquecimento...

Para contextualizar, estou fazendo um site fake para o meu time do coração (Internacional). Criei um página de plantel, onde constam todos os jogadores, e estou fazendo um link para quando acionado, ser direcionado para uma página específica de cada jogador, mais ou menos como o projeto Aluroni, quando clicamos em um prato somos direcionados para a página específica do mesmo.

Porém, quando tento adicionar uma rota de "plantel/:n" estou sendo direcionado para a página certinha... porém, não carrega a imagem do jogador - a qual está dentro da pasta 'public'. E, ao dar um refresh na página, todas as outras imagens que foram adicionadas nos componentes header e footer também estão sumindo.

Vou deixar o meu código abaixo para ver se alguém consegue encontrar um erro...

arquivo de rotas:

function App() {
  return (
    <main>
      <Router>
        <Routes>
          <Route path='/' element={<Default />}>
            <Route path='sobre' element={<Club />} />
            <Route path='trofeus' element={<Honours />} />
            <Route path='plantel' element={<Team />} />
            <Route path='plantel/:n' element={<Player />} />
            <Route path='login' element={<Login />} />
            <Route path='*' element={<NotFound />} />
          </Route>
        </Routes>
      </Router>
    </main>
  );

Arquivo onde possui o link que leva até '/plantel/:n' :

const PlayerCard = (props: IPlayer): ReactElement => {

  const { nickname, imagePath, number, position } = props;

  return (
    <div className={ styles.cardContainer } >
      <img src={imagePath} alt={`Foto do jogador ${nickname}`} />
      <div className={styles.playerInfo}>
        <strong>{ nickname }</strong>
        <span>{ position }</span>
      </div>
      <div className={styles.playerNumber}>
        { number }
      </div>
      <div className={styles.playerLink}>
        <Link to={`${number}`}>
          { <ImForward /> **React-Icons }
        </Link>
      </div>
    </div>
  );
};

export default PlayerCard;

Página Player :

const Player = (): ReactElement => {

  const players = [...playerList];
  const { n } = useParams();
  const navigate = useNavigate();

  const player = players.find(item => item.number === Number(n));

  if (!player) {
    return <NotFound />
  }

  const next = players.find(item => item.id === player?.id + 1);
  const back = players.find(item => item.id === player?.id - 1);

  console.log(next, back);

  const { age, birthday, goals, name, nickname, nationality, number, position, imgPath } = player;

  return (
    <>
      <section className={styles.container}>
        <figure className={styles.container__image}>
          <img src={imgPath} alt={`Foto do jogador ${nickname}`} />
          <div>
            {number}
          </div>
        </figure>
        <div className={styles.info}>
          <div className={styles.info__header}>
            <span>{position}</span>
            <h2>{nickname}</h2>
            <span>{name}</span>
          </div>
          <div className={styles.info__description}>
            <Info attribute={"DATA DE NASCIMENTO"} value={birthday}/>
            <Info attribute={"NACIONALIDADE"} value={nationality}/>
            <Info attribute={"IDADE"} value={String(age)}/>
            {goals > 0 && <Info attribute={'GOLS MARCADOS'} value={String(goals)} />}
          </div>
        </div>
      </section>
      <div className={styles.buttonContainer}>
        { player.id !== 1 && <button type='button' onClick={() => navigate(`/plantel/${back?.number}`)}><BsArrowLeftShort /> {back?.name}</button>}
        { player.id !== players.length &&  <button type='button'  onClick={() => navigate(`/plantel/${next?.number}`)}><BsArrowRightShort />{next?.name}</button>}
      </div>
    </>
  );
};

export default Player;

Imagens estão todas em "public/assets/players".