Salve, implementei uma variável para facilitar na hora de preencher o input da imagem no formulário, trocando digitar https://github.com/username por simplesmente o username e também tornando o card um direcionador para o GitHub provido, o código foi o seguinte:
const Colaborator = ({ name, image, role, backgroundColor }) => {
let userGitHub = "https://github.com/" + image //link do github com image sendo o nome do usuário, podem trocar depois
return (
<a className='card' href={userGitHub} target="_blank" rel="noopener noreferrer"> // link para a página do GitHub do usuário
<div className='colaborator'>
<div className='header' style={{ backgroundColor: backgroundColor }}>
<img src={userGitHub + ".png"} alt='props.name' /> // link do GitHub + png para importarmos a imagem para o código
</div>
<div className='footer'>
<h4>{name}</h4>
<h5>{role}</h5>
</div>
</div>
</a>
)
}
export default Colaborator