added empty field error scrolling gesture

src/components/hook-form/rhf-text-field.tsx

 import { Controller, useFormContext } from 'react-hook-form';
-
 import TextField, { TextFieldProps } from '@mui/material/TextField';
+import { useEffect, useRef } from 'react';
 
 // ----------------------------------------------------------------------
 
@@ -9,7 +9,14 @@ type Props = TextFieldProps & {
 };
 
 export default function RHFTextField({ name, helperText, type, ...other }: Props) {
-  const { control } = useFormContext();
+  const { control, formState: { errors } } = useFormContext();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (errors[name] && inputRef.current) {
+      inputRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+  }, [errors, name]);
 
   return (
     <Controller
@@ -30,6 +37,7 @@ export default function RHFTextField({ name, helperText, type, ...other }: Props
           }}
           error={!!error}
           helperText={error ? error?.message : helperText}
+          inputRef={inputRef}
           {...other}
         />
       )}

src/shared/sections/lives/add-edit-live/add-live-view.tsx

@@ -40,7 +40,7 @@ export default function AddLiveView() {
         chatName: Yup.string().required('Moderator is required'),
         description: Yup.string().required('Description is required'),
         startDate: Yup.date().nullable(),
-        keyWord: Yup.array().min(1).of(Yup.string()).required('Tags are required'),
+        keyWord: Yup.array().of(Yup.string()).required('Tags are required'),
         staging: Yup.boolean().required('Staging is required'),
         enableChat: Yup.boolean().required('Chat is required'),
         externalVideo: Yup.boolean().required(),