Reset button does not clear inputs in React

Question

I have this simple form in my App form. I learned that a button with type="reset" clears the inputs, but it isn't working here with React. Am I missing something?

import { useState } from "react";

export default function App() {
  const [name, setName] = useState("");
  return (
    <form>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Name"
        name="name"
      />
      <button>Submit</button>
      <button type="reset">Reset</button>
    </form>
  );
}

Answer 1

You must reset the state name with an empty string when the reset button is clicked.

export default function App() {
  const [name, setName] = useState("");

  const onClickReset = () => setName('');
  
  return (
    <form>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Name"
        name="name"
      />
      <button>Submit</button>
      <button type="reset" onClick={onClickReset}>Reset</button>
    </form>
  );
}