Cannot use two inputs with the same name

Describe the bug I cannot use two inputs with the same name, that I switch between using a checkbox.

To Reproduce

const { handleSubmit, register, watch } = useForm();

const toggle = watch("toggle");

const onSubmit = data => {
  alert(JSON.stringify(data, null, 2));
};

return (
  <form className="App" onSubmit={handleSubmit(onSubmit)}>
    <input name="toggle" ref={register} type="checkbox" />
    {toggle ? (
      <div>
        <h1>Something here</h1>
        <input name="someValue" ref={register} />
      </div>
    ) : (
      <div>
        <input name="someValue" ref={register} />
        <h1>Something HERE</h1>
      </div>
    )}
    <button type="submit">submit</button>
  </form>
);

The <input name="someValue" /> gets unmounted and re-rendered - the new one doesn’t work. Only the original one works (when the checkbox is unchecked).

Codesandbox link (Required) https://codesandbox.io/s/friendly-chaum-w4tbj

Expected behavior I expect the second input to work just as the first one does.

[bluebill1049]

This is expected behavior, an alternative solution will be unregister the field manually.

useEffect(() => {
  unregister('test');
}, [toggle])

let me know if this solves your problem.

[morgs32]

Or having a different input on mobile vs desktop and using css to hide one or the other…