[Bug] Mensagem de warning ao digitar no input.

import { useState } from "react";
import { Botao } from "../Botao";
import Campo from "../Campo";
import { ListaSuspensa } from "../ListaSuspensa";
import "./Form.css";
import { v4 as uuidv4 } from 'uuid';

const Form = ({aoColaboradorCadastrado,times,cadastrarTime}) => {


  const aoSalvar = (e) => {
    e.preventDefault();
    aoColaboradorCadastrado({
      id,
      favorito: false,
      nome,
      cargo,
      imagem,
      time
    })
    setNome('')
    setCargo('')
    setTime('')
    setImagem('')
  };

  const id = uuidv4()
  const [nome, setNome] = useState("");
  const [cargo, setCargo] = useState("");
  const [imagem, setImagem] = useState("");
  const [time, setTime] = useState("");

  const [nomeTime, setNomeTime] = useState("");
  const [corTime, setCorTime] = useState("");

  return (
    <section className="formulario">
      <form onSubmit={aoSalvar}>
        <h2>Preencha os dados para criar o card do colaborador</h2>
        <Campo
          label="Nome"
          placeholder="Digite seu nome"
          obrigatorio
          valor={nome}
          aoAlterado={valor => setNome(valor)}
        />
        <Campo
          label="Cargo"
          placeholder="Digite seu cargo"
          obrigatorio
          valor={cargo}
          aoAlterado={valor => setCargo(valor)}
        />
        <Campo 
         label="Imagem"
         placeholder="Digite o endereço da imagem" 
         valor={imagem}
         aoAlterado={valor => setImagem(valor)}
         />
        <ListaSuspensa 
            valor={time}
            aoAlterado={valor => setTime(valor)}
            label="Time" 
            itens={times} 
            obrigatorio
        />
        <Botao> Criar card </Botao>
      </form>

      <form onSubmit={(e) => {
        e.preventDefault()
        cadastrarTime({nome: nomeTime, cor: corTime })
      }}>
        <h2>Para criar um novo time</h2>
        <Campo
          label="Nome"
          placeholder="Digite o nome do time"
          obrigatorio
          valor={nomeTime}
          aoAlterado={valor => setNomeTime(valor)}
        />
        <Campo
          label="Cor Do Time"
          type="color"
          placeholder="Digite o nome do time"
          obrigatorio
          valor={corTime}
          aoAlterado={valor => setCorTime(valor)}
        />
        <Botao> Criar novo time </Botao>
      </form>
    </section>
  );
};
export default Form;



import "./Campo.css";

const Campo = ({type = 'text',label,valor,obrigatorio, placeholder,aoAlterado}) => {



  const aoDigitado = (e) => {
    // aqui está sendo passado o valor digitado para "aoAlterado" que por usa vez recebe isso em uma arrow function que tem como parâmetro o nome "valor"
    aoAlterado(e.target.value)
  };

  return (
    <div className={`campo campo-${type}`}>
      <label>{label}</label>
      <input
        value={valor}
        type={type}
        placeholder={placeholder}
        required={obrigatorio}
        onChange={aoDigitado}
      />
    </div>
  );
};

export default Campo;