React-hook-form with material-ui does not show errors from rules

Question

I'm new to using react-hook-form and after lots of research I stil cannot understand what I'm I doing wrong. I did a sandbox in which I have a simple input number.

How I would like my form to behave : I want the default value (16) to show and I want the errors below the input to show when the number does not respect the given rules (when the number is not between 16-99).

Can someone please help me understand? I'm going crazy! :s

Here is the sandbox link : https://codesandbox.io/s/crazy-northcutt-8wt6p?file=/src/App.tsx

Answer 1

Change the value of TextField's value to render's parameter value. Also add submit button in order the validation work.

I've forked your code for detailed code https://codesandbox.io/s/heuristic-fire-eroqv