You can validate your input and that's great — but screaming "you are wrong" before the user has had a chance to interact with it is not a good user experience.
Learn to display the validation status only after the user focuses out of the input. We will achieve that by creating a separate state variable called
touched which will hold whether the user focused out of the input, which we'll later use to conditionally render the validation status.
Note: you need to be using a version of React that supports Hooks (versions 16.8.0 and higher) to follow this lesson.