solution

src/components/NewMovie/NewMovie.tsx

@@ -29,14 +29,18 @@ export const NewMovie: React.FC<Props> = ({ onAdd }) => {
     setIsFormValid(false);
   };
 
+  const correctImgUrl = pattern.test(imgUrl);
+  const correctimdbUrl = pattern.test(imdbUrl);
+
+  // const isValid
+  // = !!title && pattern.test(imgUrl) && pattern.test(imdbUrl) && !!imdbId;
+
   const handleInputChange = (
     setter: React.Dispatch<React.SetStateAction<string>>, value: string,
   ) => {
-    const isValid = !!title && pattern.test(imgUrl)
-    && pattern.test(imdbUrl) && !!imdbId;
-
     setter(value);
-    setIsFormValid(isValid);
+
+    setIsFormValid(isFormValid);
   };
 
   const handleSubmit = (event: React.FormEvent) => {
@@ -88,6 +92,7 @@ export const NewMovie: React.FC<Props> = ({ onAdd }) => {
         label="Image URL"
         value={imgUrl}
         onChange={(value) => handleInputChange(setImgUrl, value)}
+        isValid={correctImgUrl}
         required
       />
 
@@ -96,6 +101,7 @@ export const NewMovie: React.FC<Props> = ({ onAdd }) => {
         label="Imdb URL"
         value={imdbUrl}
         onChange={(value) => handleInputChange(setImdbUrl, value)}
+        isValid={correctimdbUrl}
         required
       />
 

src/components/TextField/TextField.tsx

@@ -8,6 +8,7 @@ type Props = {
   placeholder?: string,
   required?: boolean,
   onChange?: (newValue: string) => void,
+  isValid?: boolean,
 };
 
 function getRandomDigits() {
@@ -23,13 +24,14 @@ export const TextField: React.FC<Props> = ({
   placeholder = `Enter ${label}`,
   required = false,
   onChange = () => {},
+  isValid,
 }) => {
   // generage a unique id once on component load
   const [id] = useState(() => `${name}-${getRandomDigits()}`);
 
   // To show errors only if the field was touched (onBlur)
   const [touched, setTouched] = useState(false);
-  const hasError = touched && required && !value;
+  const hasError = touched && required && !value.trim() && !isValid;
 
   const handleTouchedChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     onChange(event.target.value);