[Sugestão] Captação de valores de input em um formulário com um único estado

Uma sugestão para quem quiser captar os valores de um mesmo formulário sem criar um estado para cada input é criar um único estado que representa o estado do formulário:

const [formValues, setFormValues] = useState({
    nome: '',
    cargo: '',
    imagem: '',
})

E após isto, criar uma função que tratará de captar estes valores:

  const handleChange = (event) => {
    setFormValues({
      ...formValues,
      [event.target.id]: event.target.value,
    })
  }

E depois no elemento input atribuir um id para cada input e passar a nossa função:

<input
  type="text"
  id="nome"
  onChange={(e) => handleChange(e)}
/>

Obs.: O id deve ter o mesmo nome que você atribuiu ao criar o estado.