type Category = {
    title: string;
    id: string;
    description: string;
}
const categoryFormValidation: FormValidation<Category> = useFormValidation<Category>({
        validations: {
            title: {
                required: {
                    value: true,
                    message: 'Title is required.'
                }
            }
        },
        initialValues: {
            id: '1',
            title: 'default title',
        },
        onSubmit: () => {
            console.log(`Form Data > ${JSON.stringify(categoryFormValidation.data)}`  )
            console.log(`Form Error > ${JSON.stringify(categoryFormValidation.errors)}`  )
        }
    });
 return(
     <>
    <Box id="bankForm" component="form" noValidate onSubmit={categoryFormValidation.submit}>
        <FormControl error={categoryFormValidation.errors.title? true: false} fullWidth variant="outlined" margin='normal'>
                <TextField
                    required
                    id="title"
                    error={categoryFormValidation.errors.title? true: false}
                    helperText={categoryFormValidation.errors.title}
                    value={categoryFormValidation.data.title}
                    label='Category Title'
                    variant="outlined"
                    onChange={categoryFormValidation.handleChange('title')}
                />
            </FormControl>
            <FormControl fullWidth variant="outlined" margin='normal'>
                <TextField
                    minRows={3}
                    id="description"
                    value={categoryFormValidation.data.description}
                    label='Category Description'
                    variant="outlined"
                    onChange={categoryFormValidation.handleChange('description')}
                />
            </FormControl>
        </Box>
     </>
 )