[Sugestão] Outra solução

Encontrei uma solução diferente daquela que foi apresentada pelo professor, existe algum erro nela?, no console no foi informado nada. Estou utilizando styled components , eu fiz antes de assistir o video, entao esta mudando o background do time e nao o do card kkkk.

 const [color, setColor] = useState(secondaryColor);

  return (
    teamsCard.length > 0 && (
      <Container style={{ backgroundColor: color }}>
        <InputColor
          type="color"
          value={color}
          onChange={(e) => setColor(e.target.value)}
        />

        <h3 style={{ borderColor: primaryColor }}>{title}</h3>

        <CardContainer>
          {teamsCard.map((collaborator, indice) => {
            return (
              <Card
                key={indice}
                name={collaborator.name}
                office={collaborator.office}
                imgUrl={collaborator.imgUrl}
                primaryColor={primaryColor}
                onRemoveCollaborator={onRemoveCollaborator}
                id={collaborator.name}
              />
            );
          })}
        </CardContainer>
      </Container>
    )
  );