Lidar com formulários é complexo. Não é atoa que existem diversas bibliotecas para isso, como o [React Hook Form][1], [Formik][2], [Unform][3] etc.

Se você não usa uma biblioteca para lidar com o formulário, restam duas opções: [componentes controlados][4] (com estado - `useState`) ou [componentes não controlados][5] (com referência - `useRef`). No caso dessa pergunta, é usada a primeira opção, então explicarei apenas ela.

# Formulário com componentes controlados

Em resumo, um `input` controlado tem uma cara assim:

```
function Form() {
  const [valor, setValor] = React.useState('');
  return <input onChange={(e) => setValor(e.target.value)} value={valor} />;
}
```

Isso envolve alguns conceitos:

* **Controle do valor:** O valor do `input` é controlado pelo estado (`useState`). Se você não atualiza o estado, o valor do `input` não atualiza para o usuário.
* **Recebendo o valor:** Você recebe o valor digitado pelo usuário através do evento `onChange`, acessando a propriedade `target.value` do argumento passado como evento (no código acima, `e`).
* **Exibindo o valor:** Você passa o valor do seu estado para o `input` através da propriedade `value`. No exemplo acima, `value={valor}`.

Isso já está correto no código da pergunta. A questão é: como limpar o `input`?

Uma vez que você tenha entendido como funciona o armazenamento, recebimento e exibição do valor do `input`, espero que já saiba como limpar o `input`: basta limpar o estado. Veja o exemplo abaixo:

<!-- begin snippet: js hide: false console: true babel: true -->

<!-- language: lang-js -->

    function Form() {
      const [valor, setValor] = React.useState('');

      return (
        <form>
          <input onChange={(e) => setValor(e.target.value)} value={valor} />
          <button onClick={() => setValor('')} type="button">Limpar</button>
        </form>
      );
    }

    ReactDOM.render(<Form /> , document.querySelector("#app"));

<!-- language: lang-html -->

    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

    <div id="app"></div>

<!-- end snippet -->


  [1]: http://react-hook-form.com
  [2]: https://formik.org
  [3]: https://unform.dev
  [4]: https://reactjs.org/docs/forms.html#controlled-components
  [5]: https://reactjs.org/docs/uncontrolled-components.html