I am working on a to-do list app (React.js) and trying to make use of the preventDefault function. I've added an onSubmit attribute to my form element and want it to display an alert when the add button is clicked. Problem is it doesn't seem to work, here's my code

function Form (props) {
  function handleSubmit(e) {
    e.preventDefault();
    alert('Added')
  }
  return (
    <form onSubmit={handleSubmit}>
        <h2 className="label-wrapper">
          <label htmlFor="new-todo-input" className="label-lg">
            What needs to be done?
          </label>
        </h2>
        <input
          type="text"
          id="new-todo-input"
          className="input input-lg"
          name="text"
          autoComplete="off"
        ></input>
        <button type="submit" className="btn btn-primary btn__lg">
          Add
        </button>
      </form>
  )
}

export default Form;