diff --git a/src/ui-components/TimeslotCreateForm.d.ts b/src/ui-components/TimeslotCreateForm.d.ts
index 680d954..f15eaaa 100644
--- a/src/ui-components/TimeslotCreateForm.d.ts
+++ b/src/ui-components/TimeslotCreateForm.d.ts
@@ -1,13 +1,12 @@
-/** *************************************************************************
+/***************************************************************************
  * The contents of this file were generated with Amplify Studio.           *
  * Please refrain from making any modifications to this file.              *
  * Any changes to this file will be overwritten when running amplify pull. *
- ************************************************************************* */
+ **************************************************************************/
 
 import * as React from "react";
-import { EscapeHatchProps } from "@aws-amplify/ui-react/internal";
 import { GridProps, TextFieldProps } from "@aws-amplify/ui-react";
-
+import { EscapeHatchProps } from "@aws-amplify/ui-react/internal";
 export declare type ValidationResponse = {
     hasError: boolean;
     errorMessage?: string;
diff --git a/src/ui-components/TimeslotCreateForm.jsx b/src/ui-components/TimeslotCreateForm.jsx
index 5be9ae1..8f21a79 100644
--- a/src/ui-components/TimeslotCreateForm.jsx
+++ b/src/ui-components/TimeslotCreateForm.jsx
@@ -1,14 +1,11 @@
-/** *************************************************************************
+/***************************************************************************
  * The contents of this file were generated with Amplify Studio.           *
  * Please refrain from making any modifications to this file.              *
  * Any changes to this file will be overwritten when running amplify pull. *
- ************************************************************************* */
+ **************************************************************************/
 
 /* eslint-disable */
 import * as React from "react";
-import { fetchByPath, validateField } from "./utils";
-import { Timeslot } from "../models";
-import { getOverrideProps } from "@aws-amplify/ui-react/internal";
 import {
   Badge,
   Button,
@@ -21,6 +18,9 @@ import {
   TextField,
   useTheme,
 } from "@aws-amplify/ui-react";
+import { getOverrideProps } from "@aws-amplify/ui-react/internal";
+import { Timeslot } from "../models";
+import { fetchByPath, validateField } from "./utils";
 import { DataStore } from "aws-amplify";
 function ArrayField({
   items = [],
@@ -37,7 +37,14 @@ function ArrayField({
   runValidationTasks,
   errorMessage,
 }) {
-  const { tokens } = useTheme();
+  const labelElement = <Text>{label}</Text>;
+  const {
+    tokens: {
+      components: {
+        fieldmessages: { error: errorStyles },
+      },
+    },
+  } = useTheme();
   const [selectedBadgeIndex, setSelectedBadgeIndex] = React.useState();
   const [isEditing, setIsEditing] = React.useState();
   React.useEffect(() => {
@@ -53,9 +60,9 @@ function ArrayField({
   const addItem = async () => {
     const { hasError } = runValidationTasks();
     if (
-      (currentFieldValue !== undefined ||
-        currentFieldValue !== null ||
-        currentFieldValue !== "") &&
+      currentFieldValue !== undefined &&
+      currentFieldValue !== null &&
+      currentFieldValue !== "" &&
       !hasError
     ) {
       const newItems = [...items];
@@ -69,45 +76,8 @@ function ArrayField({
       setIsEditing(false);
     }
   };
-  return (
+  const arraySection = (
     <React.Fragment>
-      {isEditing && children}
-      {!isEditing ? (
-        <>
-          <Text>{label}</Text>
-          <Button
-            onClick={() => {
-              setIsEditing(true);
-            }}
-          >
-            Add item
-          </Button>
-        </>
-      ) : (
-        <Flex justifyContent="flex-end">
-          {(currentFieldValue || isEditing) && (
-            <Button
-              children="Cancel"
-              type="button"
-              size="small"
-              onClick={() => {
-                setFieldValue(defaultFieldValue);
-                setIsEditing(false);
-                setSelectedBadgeIndex(undefined);
-              }}
-            ></Button>
-          )}
-          <Button
-            size="small"
-            variation="link"
-            color={tokens.colors.brand.primary[80]}
-            isDisabled={hasError}
-            onClick={addItem}
-          >
-            {selectedBadgeIndex !== undefined ? "Save" : "Add"}
-          </Button>
-        </Flex>
-      )}
       {!!items?.length && (
         <ScrollView height="inherit" width="inherit" maxHeight={"7rem"}>
           {items.map((value, index) => {
@@ -128,7 +98,7 @@ function ArrayField({
                   setIsEditing(true);
                 }}
               >
-                {value.toString()}
+                {getBadgeText ? getBadgeText(value) : value.toString()}
                 <Icon
                   style={{
                     cursor: "pointer",
@@ -213,15 +183,14 @@ export default function TimeslotCreateForm(props) {
     onSuccess,
     onError,
     onSubmit,
-    onCancel,
     onValidate,
     onChange,
     overrides,
     ...rest
   } = props;
   const initialValues = {
-    startTime: undefined,
-    endTime: undefined,
+    startTime: "",
+    endTime: "",
     unavailableDates: [],
     availableSundays: [],
     riderUnavailableDates: [],
@@ -250,7 +219,7 @@ export default function TimeslotCreateForm(props) {
     setErrors({});
   };
   const [currentUnavailableDatesValue, setCurrentUnavailableDatesValue] =
-    React.useState(undefined);
+    React.useState("");
   const unavailableDatesRef = React.createRef();
   const [currentAvailableSundaysValue, setCurrentAvailableSundaysValue] =
     React.useState("");
@@ -267,7 +236,15 @@ export default function TimeslotCreateForm(props) {
     availableSundays: [],
     riderUnavailableDates: [],
   };
-  const runValidationTasks = async (fieldName, value) => {
+  const runValidationTasks = async (
+    fieldName,
+    currentValue,
+    getDisplayValue
+  ) => {
+    const value =
+      currentValue && getDisplayValue
+        ? getDisplayValue(currentValue)
+        : currentValue;
     let validationResponse = validateField(value, validations[fieldName]);
     const customValidator = fetchByPath(onValidate, fieldName);
     if (customValidator) {
@@ -332,8 +309,8 @@ export default function TimeslotCreateForm(props) {
           }
         }
       }}
-      {...rest}
       {...getOverrideProps(overrides, "TimeslotCreateForm")}
+      {...rest}
     >
       <TextField
         label="Start time"
@@ -408,7 +385,7 @@ export default function TimeslotCreateForm(props) {
             values = result?.unavailableDates ?? values;
           }
           setUnavailableDates(values);
-          setCurrentUnavailableDatesValue(undefined);
+          setCurrentUnavailableDatesValue("");
         }}
         currentFieldValue={currentUnavailableDatesValue}
         label={"Unavailable dates"}
@@ -423,7 +400,7 @@ export default function TimeslotCreateForm(props) {
         errorMessage={errors?.unavailableDates?.errorMessage}
         setFieldValue={setCurrentUnavailableDatesValue}
         inputFieldRef={unavailableDatesRef}
-        defaultFieldValue={undefined}
+        defaultFieldValue={""}
       >
         <TextField
           label="Unavailable dates"
@@ -444,6 +421,7 @@ export default function TimeslotCreateForm(props) {
           errorMessage={errors.unavailableDates?.errorMessage}
           hasError={errors.unavailableDates?.hasError}
           ref={unavailableDatesRef}
+          labelHidden={true}
           {...getOverrideProps(overrides, "unavailableDates")}
         ></TextField>
       </ArrayField>
@@ -567,21 +545,16 @@ export default function TimeslotCreateForm(props) {
         <Button
           children="Clear"
           type="reset"
-          onClick={resetStateValues}
+          onClick={(event) => {
+            event.preventDefault();
+            resetStateValues();
+          }}
           {...getOverrideProps(overrides, "ClearButton")}
         ></Button>
         <Flex
           gap="15px"
           {...getOverrideProps(overrides, "RightAlignCTASubFlex")}
         >
-          <Button
-            children="Cancel"
-            type="button"
-            onClick={() => {
-              onCancel && onCancel();
-            }}
-            {...getOverrideProps(overrides, "CancelButton")}
-          ></Button>
           <Button
             children="Submit"
             type="submit"
diff --git a/src/ui-components/TimeslotUpdateForm.d.ts b/src/ui-components/TimeslotUpdateForm.d.ts
index abd393f..6656695 100644
--- a/src/ui-components/TimeslotUpdateForm.d.ts
+++ b/src/ui-components/TimeslotUpdateForm.d.ts
@@ -1,14 +1,13 @@
-/** *************************************************************************
+/***************************************************************************
  * The contents of this file were generated with Amplify Studio.           *
  * Please refrain from making any modifications to this file.              *
  * Any changes to this file will be overwritten when running amplify pull. *
- ************************************************************************* */
+ **************************************************************************/
 
 import * as React from "react";
-import { EscapeHatchProps } from "@aws-amplify/ui-react/internal";
 import { GridProps, TextFieldProps } from "@aws-amplify/ui-react";
+import { EscapeHatchProps } from "@aws-amplify/ui-react/internal";
 import { Timeslot } from "../models";
-
 export declare type ValidationResponse = {
     hasError: boolean;
     errorMessage?: string;
diff --git a/src/ui-components/TimeslotUpdateForm.jsx b/src/ui-components/TimeslotUpdateForm.jsx
index 9362c2c..c740886 100644
--- a/src/ui-components/TimeslotUpdateForm.jsx
+++ b/src/ui-components/TimeslotUpdateForm.jsx
@@ -1,14 +1,11 @@
-/** *************************************************************************
+/***************************************************************************
  * The contents of this file were generated with Amplify Studio.           *
  * Please refrain from making any modifications to this file.              *
  * Any changes to this file will be overwritten when running amplify pull. *
- ************************************************************************* */
+ **************************************************************************/
 
 /* eslint-disable */
 import * as React from "react";
-import { fetchByPath, validateField } from "./utils";
-import { Timeslot } from "../models";
-import { getOverrideProps } from "@aws-amplify/ui-react/internal";
 import {
   Badge,
   Button,
@@ -21,6 +18,9 @@ import {
   TextField,
   useTheme,
 } from "@aws-amplify/ui-react";
+import { getOverrideProps } from "@aws-amplify/ui-react/internal";
+import { Timeslot } from "../models";
+import { fetchByPath, validateField } from "./utils";
 import { DataStore } from "aws-amplify";
 function ArrayField({
   items = [],
@@ -37,7 +37,14 @@ function ArrayField({
   runValidationTasks,
   errorMessage,
 }) {
-  const { tokens } = useTheme();
+  const labelElement = <Text>{label}</Text>;
+  const {
+    tokens: {
+      components: {
+        fieldmessages: { error: errorStyles },
+      },
+    },
+  } = useTheme();
   const [selectedBadgeIndex, setSelectedBadgeIndex] = React.useState();
   const [isEditing, setIsEditing] = React.useState();
   React.useEffect(() => {
@@ -53,9 +60,9 @@ function ArrayField({
   const addItem = async () => {
     const { hasError } = runValidationTasks();
     if (
-      (currentFieldValue !== undefined ||
-        currentFieldValue !== null ||
-        currentFieldValue !== "") &&
+      currentFieldValue !== undefined &&
+      currentFieldValue !== null &&
+      currentFieldValue !== "" &&
       !hasError
     ) {
       const newItems = [...items];
@@ -69,45 +76,8 @@ function ArrayField({
       setIsEditing(false);
     }
   };
-  return (
+  const arraySection = (
     <React.Fragment>
-      {isEditing && children}
-      {!isEditing ? (
-        <>
-          <Text>{label}</Text>
-          <Button
-            onClick={() => {
-              setIsEditing(true);
-            }}
-          >
-            Add item
-          </Button>
-        </>
-      ) : (
-        <Flex justifyContent="flex-end">
-          {(currentFieldValue || isEditing) && (
-            <Button
-              children="Cancel"
-              type="button"
-              size="small"
-              onClick={() => {
-                setFieldValue(defaultFieldValue);
-                setIsEditing(false);
-                setSelectedBadgeIndex(undefined);
-              }}
-            ></Button>
-          )}
-          <Button
-            size="small"
-            variation="link"
-            color={tokens.colors.brand.primary[80]}
-            isDisabled={hasError}
-            onClick={addItem}
-          >
-            {selectedBadgeIndex !== undefined ? "Save" : "Add"}
-          </Button>
-        </Flex>
-      )}
       {!!items?.length && (
         <ScrollView height="inherit" width="inherit" maxHeight={"7rem"}>
           {items.map((value, index) => {
@@ -128,7 +98,7 @@ function ArrayField({
                   setIsEditing(true);
                 }}
               >
-                {value.toString()}
+                {getBadgeText ? getBadgeText(value) : value.toString()}
                 <Icon
                   style={{
                     cursor: "pointer",
@@ -214,15 +184,14 @@ export default function TimeslotUpdateForm(props) {
     onSuccess,
     onError,
     onSubmit,
-    onCancel,
     onValidate,
     onChange,
     overrides,
     ...rest
   } = props;
   const initialValues = {
-    startTime: undefined,
-    endTime: undefined,
+    startTime: "",
+    endTime: "",
     unavailableDates: [],
     availableSundays: [],
     riderUnavailableDates: [],
@@ -240,7 +209,9 @@ export default function TimeslotUpdateForm(props) {
   );
   const [errors, setErrors] = React.useState({});
   const resetStateValues = () => {
-    const cleanValues = { ...initialValues, ...timeslotRecord };
+    const cleanValues = timeslotRecord
+      ? { ...initialValues, ...timeslotRecord }
+      : initialValues;
     setStartTime(cleanValues.startTime);
     setEndTime(cleanValues.endTime);
     setUnavailableDates(cleanValues.unavailableDates ?? []);
@@ -263,7 +234,7 @@ export default function TimeslotUpdateForm(props) {
   }, [idProp, timeslotModelProp]);
   React.useEffect(resetStateValues, [timeslotRecord]);
   const [currentUnavailableDatesValue, setCurrentUnavailableDatesValue] =
-    React.useState(undefined);
+    React.useState("");
   const unavailableDatesRef = React.createRef();
   const [currentAvailableSundaysValue, setCurrentAvailableSundaysValue] =
     React.useState("");
@@ -280,7 +251,15 @@ export default function TimeslotUpdateForm(props) {
     availableSundays: [],
     riderUnavailableDates: [],
   };
-  const runValidationTasks = async (fieldName, value) => {
+  const runValidationTasks = async (
+    fieldName,
+    currentValue,
+    getDisplayValue
+  ) => {
+    const value =
+      currentValue && getDisplayValue
+        ? getDisplayValue(currentValue)
+        : currentValue;
     let validationResponse = validateField(value, validations[fieldName]);
     const customValidator = fetchByPath(onValidate, fieldName);
     if (customValidator) {
@@ -346,8 +325,8 @@ export default function TimeslotUpdateForm(props) {
           }
         }
       }}
-      {...rest}
       {...getOverrideProps(overrides, "TimeslotUpdateForm")}
+      {...rest}
     >
       <TextField
         label="Start time"
@@ -422,7 +401,7 @@ export default function TimeslotUpdateForm(props) {
             values = result?.unavailableDates ?? values;
           }
           setUnavailableDates(values);
-          setCurrentUnavailableDatesValue(undefined);
+          setCurrentUnavailableDatesValue("");
         }}
         currentFieldValue={currentUnavailableDatesValue}
         label={"Unavailable dates"}
@@ -437,7 +416,7 @@ export default function TimeslotUpdateForm(props) {
         errorMessage={errors?.unavailableDates?.errorMessage}
         setFieldValue={setCurrentUnavailableDatesValue}
         inputFieldRef={unavailableDatesRef}
-        defaultFieldValue={undefined}
+        defaultFieldValue={""}
       >
         <TextField
           label="Unavailable dates"
@@ -458,6 +437,7 @@ export default function TimeslotUpdateForm(props) {
           errorMessage={errors.unavailableDates?.errorMessage}
           hasError={errors.unavailableDates?.hasError}
           ref={unavailableDatesRef}
+          labelHidden={true}
           {...getOverrideProps(overrides, "unavailableDates")}
         ></TextField>
       </ArrayField>
@@ -592,14 +572,6 @@ export default function TimeslotUpdateForm(props) {
           gap="15px"
           {...getOverrideProps(overrides, "RightAlignCTASubFlex")}
         >
-          <Button
-            children="Cancel"
-            type="button"
-            onClick={() => {
-              onCancel && onCancel();
-            }}
-            {...getOverrideProps(overrides, "CancelButton")}
-          ></Button>
           <Button
             children="Submit"
             type="submit"
diff --git a/src/ui-components/UserCreateForm.d.ts b/src/ui-components/UserCreateForm.d.ts
index b322507..49a7543 100644
--- a/src/ui-components/UserCreateForm.d.ts
+++ b/src/ui-components/UserCreateForm.d.ts
@@ -5,8 +5,8 @@
  **************************************************************************/
 
 import * as React from "react";
-import { EscapeHatchProps } from "@aws-amplify/ui-react/internal";
 import { GridProps, TextFieldProps } from "@aws-amplify/ui-react";
+import { EscapeHatchProps } from "@aws-amplify/ui-react/internal";
 export declare type ValidationResponse = {
     hasError: boolean;
     errorMessage?: string;
@@ -24,13 +24,13 @@ export declare type UserCreateFormValidationValues = {
     lastName?: ValidationFunction<string>;
     userType?: ValidationFunction<string>;
 };
-export declare type FormProps<T> = Partial<T> & React.DOMAttributes<HTMLDivElement>;
+export declare type PrimitiveOverrideProps<T> = Partial<T> & React.DOMAttributes<HTMLDivElement>;
 export declare type UserCreateFormOverridesProps = {
-    UserCreateFormGrid?: FormProps<GridProps>;
-    userName?: FormProps<TextFieldProps>;
-    firstName?: FormProps<TextFieldProps>;
-    lastName?: FormProps<TextFieldProps>;
-    userType?: FormProps<TextFieldProps>;
+    UserCreateFormGrid?: PrimitiveOverrideProps<GridProps>;
+    userName?: PrimitiveOverrideProps<TextFieldProps>;
+    firstName?: PrimitiveOverrideProps<TextFieldProps>;
+    lastName?: PrimitiveOverrideProps<TextFieldProps>;
+    userType?: PrimitiveOverrideProps<TextFieldProps>;
 } & EscapeHatchProps;
 export declare type UserCreateFormProps = React.PropsWithChildren<{
     overrides?: UserCreateFormOverridesProps | undefined | null;
@@ -39,7 +39,6 @@ export declare type UserCreateFormProps = React.PropsWithChildren<{
     onSubmit?: (fields: UserCreateFormInputValues) => UserCreateFormInputValues;
     onSuccess?: (fields: UserCreateFormInputValues) => void;
     onError?: (fields: UserCreateFormInputValues, errorMessage: string) => void;
-    onCancel?: () => void;
     onChange?: (fields: UserCreateFormInputValues) => UserCreateFormInputValues;
     onValidate?: UserCreateFormValidationValues;
 } & React.CSSProperties>;
diff --git a/src/ui-components/UserCreateForm.jsx b/src/ui-components/UserCreateForm.jsx
index 11a16d5..2daa91c 100644
--- a/src/ui-components/UserCreateForm.jsx
+++ b/src/ui-components/UserCreateForm.jsx
@@ -1,15 +1,15 @@
-/** *************************************************************************
+/***************************************************************************
  * The contents of this file were generated with Amplify Studio.           *
  * Please refrain from making any modifications to this file.              *
  * Any changes to this file will be overwritten when running amplify pull. *
- ************************************************************************* */
+ **************************************************************************/
 
 /* eslint-disable */
 import * as React from "react";
-import { fetchByPath, validateField } from "./utils";
-import { User } from "../models";
-import { getOverrideProps } from "@aws-amplify/ui-react/internal";
 import { Button, Flex, Grid, TextField } from "@aws-amplify/ui-react";
+import { getOverrideProps } from "@aws-amplify/ui-react/internal";
+import { User } from "../models";
+import { fetchByPath, validateField } from "./utils";
 import { DataStore } from "aws-amplify";
 export default function UserCreateForm(props) {
   const {
@@ -17,17 +17,16 @@ export default function UserCreateForm(props) {
     onSuccess,
     onError,
     onSubmit,
-    onCancel,
     onValidate,
     onChange,
     overrides,
     ...rest
   } = props;
   const initialValues = {
-    userName: undefined,
-    firstName: undefined,
-    lastName: undefined,
-    userType: undefined,
+    userName: "",
+    firstName: "",
+    lastName: "",
+    userType: "",
   };
   const [userName, setUserName] = React.useState(initialValues.userName);
   const [firstName, setFirstName] = React.useState(initialValues.firstName);
@@ -47,7 +46,15 @@ export default function UserCreateForm(props) {
     lastName: [],
     userType: [],
   };
-  const runValidationTasks = async (fieldName, value) => {
+  const runValidationTasks = async (
+    fieldName,
+    currentValue,
+    getDisplayValue
+  ) => {
+    const value =
+      currentValue && getDisplayValue
+        ? getDisplayValue(currentValue)
+        : currentValue;
     let validationResponse = validateField(value, validations[fieldName]);
     const customValidator = fetchByPath(onValidate, fieldName);
     if (customValidator) {
@@ -111,13 +118,14 @@ export default function UserCreateForm(props) {
           }
         }
       }}
-      {...rest}
       {...getOverrideProps(overrides, "UserCreateForm")}
+      {...rest}
     >
       <TextField
         label="User name"
         isRequired={false}
         isReadOnly={false}
+        value={userName}
         onChange={(e) => {
           let { value } = e.target;
           if (onChange) {
@@ -144,6 +152,7 @@ export default function UserCreateForm(props) {
         label="First name"
         isRequired={false}
         isReadOnly={false}
+        value={firstName}
         onChange={(e) => {
           let { value } = e.target;
           if (onChange) {
@@ -170,6 +179,7 @@ export default function UserCreateForm(props) {
         label="Last name"
         isRequired={false}
         isReadOnly={false}
+        value={lastName}
         onChange={(e) => {
           let { value } = e.target;
           if (onChange) {
@@ -196,6 +206,7 @@ export default function UserCreateForm(props) {
         label="User type"
         isRequired={false}
         isReadOnly={false}
+        value={userType}
         onChange={(e) => {
           let { value } = e.target;
           if (onChange) {
@@ -225,21 +236,16 @@ export default function UserCreateForm(props) {
         <Button
           children="Clear"
           type="reset"
-          onClick={resetStateValues}
+          onClick={(event) => {
+            event.preventDefault();
+            resetStateValues();
+          }}
           {...getOverrideProps(overrides, "ClearButton")}
         ></Button>
         <Flex
           gap="15px"
           {...getOverrideProps(overrides, "RightAlignCTASubFlex")}
         >
-          <Button
-            children="Cancel"
-            type="button"
-            onClick={() => {
-              onCancel && onCancel();
-            }}
-            {...getOverrideProps(overrides, "CancelButton")}
-          ></Button>
           <Button
             children="Submit"
             type="submit"
diff --git a/src/ui-components/UserUpdateForm.d.ts b/src/ui-components/UserUpdateForm.d.ts
index d6e2d3f..e0b7765 100644
--- a/src/ui-components/UserUpdateForm.d.ts
+++ b/src/ui-components/UserUpdateForm.d.ts
@@ -5,9 +5,9 @@
  **************************************************************************/
 
 import * as React from "react";
-import { User } from "../models";
-import { EscapeHatchProps } from "@aws-amplify/ui-react/internal";
 import { GridProps, TextFieldProps } from "@aws-amplify/ui-react";
+import { EscapeHatchProps } from "@aws-amplify/ui-react/internal";
+import { User } from "../models";
 export declare type ValidationResponse = {
     hasError: boolean;
     errorMessage?: string;
@@ -25,13 +25,13 @@ export declare type UserUpdateFormValidationValues = {
     lastName?: ValidationFunction<string>;
     userType?: ValidationFunction<string>;
 };
-export declare type FormProps<T> = Partial<T> & React.DOMAttributes<HTMLDivElement>;
+export declare type PrimitiveOverrideProps<T> = Partial<T> & React.DOMAttributes<HTMLDivElement>;
 export declare type UserUpdateFormOverridesProps = {
-    UserUpdateFormGrid?: FormProps<GridProps>;
-    userName?: FormProps<TextFieldProps>;
-    firstName?: FormProps<TextFieldProps>;
-    lastName?: FormProps<TextFieldProps>;
-    userType?: FormProps<TextFieldProps>;
+    UserUpdateFormGrid?: PrimitiveOverrideProps<GridProps>;
+    userName?: PrimitiveOverrideProps<TextFieldProps>;
+    firstName?: PrimitiveOverrideProps<TextFieldProps>;
+    lastName?: PrimitiveOverrideProps<TextFieldProps>;
+    userType?: PrimitiveOverrideProps<TextFieldProps>;
 } & EscapeHatchProps;
 export declare type UserUpdateFormProps = React.PropsWithChildren<{
     overrides?: UserUpdateFormOverridesProps | undefined | null;
@@ -41,7 +41,6 @@ export declare type UserUpdateFormProps = React.PropsWithChildren<{
     onSubmit?: (fields: UserUpdateFormInputValues) => UserUpdateFormInputValues;
     onSuccess?: (fields: UserUpdateFormInputValues) => void;
     onError?: (fields: UserUpdateFormInputValues, errorMessage: string) => void;
-    onCancel?: () => void;
     onChange?: (fields: UserUpdateFormInputValues) => UserUpdateFormInputValues;
     onValidate?: UserUpdateFormValidationValues;
 } & React.CSSProperties>;
diff --git a/src/ui-components/UserUpdateForm.jsx b/src/ui-components/UserUpdateForm.jsx
index 59c5990..b8dd040 100644
--- a/src/ui-components/UserUpdateForm.jsx
+++ b/src/ui-components/UserUpdateForm.jsx
@@ -1,15 +1,15 @@
-/** *************************************************************************
+/***************************************************************************
  * The contents of this file were generated with Amplify Studio.           *
  * Please refrain from making any modifications to this file.              *
  * Any changes to this file will be overwritten when running amplify pull. *
- ************************************************************************* */
+ **************************************************************************/
 
 /* eslint-disable */
 import * as React from "react";
-import { fetchByPath, validateField } from "./utils";
-import { User } from "../models";
-import { getOverrideProps } from "@aws-amplify/ui-react/internal";
 import { Button, Flex, Grid, TextField } from "@aws-amplify/ui-react";
+import { getOverrideProps } from "@aws-amplify/ui-react/internal";
+import { User } from "../models";
+import { fetchByPath, validateField } from "./utils";
 import { DataStore } from "aws-amplify";
 export default function UserUpdateForm(props) {
   const {
@@ -18,17 +18,16 @@ export default function UserUpdateForm(props) {
     onSuccess,
     onError,
     onSubmit,
-    onCancel,
     onValidate,
     onChange,
     overrides,
     ...rest
   } = props;
   const initialValues = {
-    userName: undefined,
-    firstName: undefined,
-    lastName: undefined,
-    userType: undefined,
+    userName: "",
+    firstName: "",
+    lastName: "",
+    userType: "",
   };
   const [userName, setUserName] = React.useState(initialValues.userName);
   const [firstName, setFirstName] = React.useState(initialValues.firstName);
@@ -36,7 +35,9 @@ export default function UserUpdateForm(props) {
   const [userType, setUserType] = React.useState(initialValues.userType);
   const [errors, setErrors] = React.useState({});
   const resetStateValues = () => {
-    const cleanValues = { ...initialValues, ...userRecord };
+    const cleanValues = userRecord
+      ? { ...initialValues, ...userRecord }
+      : initialValues;
     setUserName(cleanValues.userName);
     setFirstName(cleanValues.firstName);
     setLastName(cleanValues.lastName);
@@ -60,7 +61,15 @@ export default function UserUpdateForm(props) {
     lastName: [],
     userType: [],
   };
-  const runValidationTasks = async (fieldName, value) => {
+  const runValidationTasks = async (
+    fieldName,
+    currentValue,
+    getDisplayValue
+  ) => {
+    const value =
+      currentValue && getDisplayValue
+        ? getDisplayValue(currentValue)
+        : currentValue;
     let validationResponse = validateField(value, validations[fieldName]);
     const customValidator = fetchByPath(onValidate, fieldName);
     if (customValidator) {
@@ -125,14 +134,14 @@ export default function UserUpdateForm(props) {
           }
         }
       }}
-      {...rest}
       {...getOverrideProps(overrides, "UserUpdateForm")}
+      {...rest}
     >
       <TextField
         label="User name"
         isRequired={false}
         isReadOnly={false}
-        defaultValue={userName}
+        value={userName}
         onChange={(e) => {
           let { value } = e.target;
           if (onChange) {
@@ -159,7 +168,7 @@ export default function UserUpdateForm(props) {
         label="First name"
         isRequired={false}
         isReadOnly={false}
-        defaultValue={firstName}
+        value={firstName}
         onChange={(e) => {
           let { value } = e.target;
           if (onChange) {
@@ -186,7 +195,7 @@ export default function UserUpdateForm(props) {
         label="Last name"
         isRequired={false}
         isReadOnly={false}
-        defaultValue={lastName}
+        value={lastName}
         onChange={(e) => {
           let { value } = e.target;
           if (onChange) {
@@ -213,7 +222,7 @@ export default function UserUpdateForm(props) {
         label="User type"
         isRequired={false}
         isReadOnly={false}
-        defaultValue={userType}
+        value={userType}
         onChange={(e) => {
           let { value } = e.target;
           if (onChange) {
@@ -254,14 +263,6 @@ export default function UserUpdateForm(props) {
           gap="15px"
           {...getOverrideProps(overrides, "RightAlignCTASubFlex")}
         >
-          <Button
-            children="Cancel"
-            type="button"
-            onClick={() => {
-              onCancel && onCancel();
-            }}
-            {...getOverrideProps(overrides, "CancelButton")}
-          ></Button>
           <Button
             children="Submit"
             type="submit"
diff --git a/src/ui-components/utils.js b/src/ui-components/utils.js
index 7625bde..b02f446 100644
--- a/src/ui-components/utils.js
+++ b/src/ui-components/utils.js
@@ -7,7 +7,7 @@
 /* eslint-disable */
 export const validateField = (value, validations) => {
   for (const validation of validations) {
-    if (value === undefined || value === "") {
+    if (value === undefined || value === "" || value === null) {
       if (validation.type === "Required") {
         return {
           hasError: true,