Warning: A component is changing an uncontrolled input of type text to be controlled.

[kusmierz]

Describe the bug
Trying to change MUI Textfield on demo page, results a warning as follow.

Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components
    in input (created by ForwardRef(InputBase))
    in div (created by ForwardRef(InputBase))
    in ForwardRef(InputBase) (created by WithStyles(ForwardRef(InputBase)))
    in WithStyles(ForwardRef(InputBase)) (created by ForwardRef(Input))
    in ForwardRef(Input) (created by WithStyles(ForwardRef(Input)))
    in WithStyles(ForwardRef(Input)) (created by ForwardRef(TextField))
    in div (created by ForwardRef(FormControl))
    in ForwardRef(FormControl) (created by WithStyles(ForwardRef(FormControl)))
    in WithStyles(ForwardRef(FormControl)) (created by ForwardRef(TextField))
    in ForwardRef(TextField) (created by WithStyles(ForwardRef(TextField)))
    in WithStyles(ForwardRef(TextField)) (at src/index.js:91)
    in RHFInput (at src/index.js:90)
    in section (at src/index.js:88)
    in div (at src/index.js:47)
    in form (at src/index.js:43)
    in ThemeProvider (at src/index.js:42)
    in App (at src/index.js:166)

To Reproduce
Steps to reproduce the behavior:

1. Go to demo page, results a warning as follow.
2. Open CodeSandbox Browser's Console
3. Click on 'MUI TextField'
4. Type anything
5. See the error

Codesandbox link
https://codesandbox.io/s/react-hook-form-hookforminput-rzu9s

Expected behavior
No error at all

Screenshots

Desktop (please complete the following information):

• OS: macOS 10.15.2
• Browser: Chrome
• Version: 78.0.3904.108

[zhihongl]

Just give a default value or value={value|| ''} will solve the issue

[HiepPP]

I'm using react hook form v6 (link demo) and meet the same error. I resolve it with the following code:
<Checkbox onChange={(e) => props.onChange(e.target.checked)} checked={props.value || false} />