@availity/mui-controlled-form 0.2.5 → 0.2.6

package/dist/index.mjs

@@ -32,7 +32,7 @@ var __objRest = (source, exclude) => {
 
 // src/lib/AsyncAutocomplete.tsx
 import { AsyncAutocomplete } from "@availity/mui-autocomplete";
-import { useFormContext, Controller } from "react-hook-form";
+import { Controller } from "react-hook-form";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var ControlledAsyncAutocomplete = (_a) => {
   var _b = _a, {
@@ -66,14 +66,10 @@ var ControlledAsyncAutocomplete = (_a) => {
     "value",
     "FieldProps"
   ]);
-  var _a2;
-  const { control, getFieldState } = useFormContext();
-  const errorMessage = (_a2 = getFieldState(name).error) == null ? void 0 : _a2.message;
   return /* @__PURE__ */ jsx(
     Controller,
     {
       name,
-      control,
       defaultValue: rest.defaultValue,
       rules: {
         deps,
@@ -90,14 +86,14 @@ var ControlledAsyncAutocomplete = (_a) => {
         value
       },
       shouldUnregister,
-      render: ({ field: { onChange: onChange2, value: value2, onBlur: onBlur2 } }) => /* @__PURE__ */ jsx(
+      render: ({ field: { onChange: onChange2, value: value2, onBlur: onBlur2 }, fieldState: { error } }) => /* @__PURE__ */ jsx(
         AsyncAutocomplete,
         __spreadProps(__spreadValues({}, rest), {
           FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
             required: typeof required === "object" ? required.value : !!required,
-            error: !!errorMessage,
-            helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              errorMessage,
+            error: !!error,
+            helperText: (error == null ? void 0 : error.message) ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              error.message,
               /* @__PURE__ */ jsx("br", {}),
               FieldProps == null ? void 0 : FieldProps.helperText
             ] }) : FieldProps == null ? void 0 : FieldProps.helperText
@@ -118,7 +114,7 @@ var ControlledAsyncAutocomplete = (_a) => {
 
 // src/lib/Autocomplete.tsx
 import { Autocomplete } from "@availity/mui-autocomplete";
-import { useFormContext as useFormContext2, Controller as Controller2 } from "react-hook-form";
+import { Controller as Controller2 } from "react-hook-form";
 import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var ControlledAutocomplete = (_a) => {
   var _b = _a, {
@@ -154,13 +150,9 @@ var ControlledAutocomplete = (_a) => {
     "validate",
     "value"
   ]);
-  var _a2;
-  const { control, getFieldState } = useFormContext2();
-  const errorMessage = (_a2 = getFieldState(name).error) == null ? void 0 : _a2.message;
   return /* @__PURE__ */ jsx2(
     Controller2,
     {
-      control,
       name,
       defaultValue,
       rules: {
@@ -178,14 +170,14 @@ var ControlledAutocomplete = (_a) => {
         value
       },
       shouldUnregister,
-      render: ({ field: { onChange: onChange2, value: value2, onBlur: onBlur2 } }) => /* @__PURE__ */ jsx2(
+      render: ({ field: { onChange: onChange2, value: value2, onBlur: onBlur2 }, fieldState: { error } }) => /* @__PURE__ */ jsx2(
         Autocomplete,
         __spreadProps(__spreadValues({}, rest), {
           FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
             required: typeof required === "object" ? required.value : !!required,
-            error: !!errorMessage,
-            helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
-              errorMessage,
+            error: !!error,
+            helperText: (error == null ? void 0 : error.message) ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+              error.message,
               /* @__PURE__ */ jsx2("br", {}),
               FieldProps == null ? void 0 : FieldProps.helperText
             ] }) : FieldProps == null ? void 0 : FieldProps.helperText
@@ -206,46 +198,50 @@ var ControlledAutocomplete = (_a) => {
 
 // src/lib/Checkbox.tsx
 import { Checkbox } from "@availity/mui-checkbox";
-import { useFormContext as useFormContext3 } from "react-hook-form";
+import { Controller as Controller3 } from "react-hook-form";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var ControlledCheckbox = (_a) => {
   var _b = _a, {
     name,
-    setValueAs,
     disabled,
     onChange,
     onBlur,
     value,
+    defaultValue = false,
     shouldUnregister,
     deps
   } = _b, rest = __objRest(_b, [
     "name",
-    "setValueAs",
     "disabled",
     "onChange",
     "onBlur",
     "value",
+    "defaultValue",
     "shouldUnregister",
     "deps"
   ]);
-  const { register } = useFormContext3();
   return /* @__PURE__ */ jsx3(
-    Checkbox,
-    __spreadValues(__spreadValues({}, rest), register(name, {
-      setValueAs,
+    Controller3,
+    {
+      name,
+      defaultValue,
       disabled,
-      onChange,
-      onBlur,
-      value,
+      rules: {
+        onChange,
+        onBlur,
+        value,
+        shouldUnregister,
+        deps
+      },
       shouldUnregister,
-      deps
-    }))
+      render: ({ field }) => /* @__PURE__ */ jsx3(Checkbox, __spreadProps(__spreadValues(__spreadValues({}, rest), field), { checked: field.value, onChange: (e) => field.onChange(e.target.checked) }))
+    }
   );
 };
 
 // src/lib/CodesAutocomplete.tsx
 import { CodesAutocomplete } from "@availity/mui-autocomplete";
-import { useFormContext as useFormContext4, Controller as Controller3 } from "react-hook-form";
+import { Controller as Controller4 } from "react-hook-form";
 import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var ControlledCodesAutocomplete = (_a) => {
   var _b = _a, {
@@ -277,14 +273,10 @@ var ControlledCodesAutocomplete = (_a) => {
     "value",
     "FieldProps"
   ]);
-  var _a2;
-  const { control, getFieldState } = useFormContext4();
-  const errorMessage = (_a2 = getFieldState(name).error) == null ? void 0 : _a2.message;
   return /* @__PURE__ */ jsx4(
-    Controller3,
+    Controller4,
     {
       name,
-      control,
       defaultValue,
       rules: {
         deps,
@@ -299,14 +291,14 @@ var ControlledCodesAutocomplete = (_a) => {
         value
       },
       shouldUnregister,
-      render: ({ field: { onChange: onChange2, value: value2, onBlur: onBlur2 } }) => /* @__PURE__ */ jsx4(
+      render: ({ field: { onChange: onChange2, value: value2, onBlur: onBlur2 }, fieldState: { error } }) => /* @__PURE__ */ jsx4(
         CodesAutocomplete,
         __spreadProps(__spreadValues({}, rest), {
           FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
             required: typeof required === "object" ? required.value : !!required,
-            error: !!errorMessage,
-            helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
-              errorMessage,
+            error: !!error,
+            helperText: (error == null ? void 0 : error.message) ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
+              error.message,
               /* @__PURE__ */ jsx4("br", {}),
               FieldProps == null ? void 0 : FieldProps.helperText
             ] }) : FieldProps == null ? void 0 : FieldProps.helperText
@@ -335,12 +327,12 @@ var ControlledForm = (_a) => {
     useFormOptions.resolver = validationResolver(schema);
   }
   const methods = useForm(useFormOptions);
-  return /* @__PURE__ */ jsx5(FormProvider, __spreadProps(__spreadValues({}, methods), { children: /* @__PURE__ */ jsx5("form", __spreadValues({ onSubmit: methods.handleSubmit(onSubmit) }, rest)) }));
+  return /* @__PURE__ */ jsx5(FormProvider, __spreadProps(__spreadValues({}, methods), { children: /* @__PURE__ */ jsx5("form", __spreadValues({ onSubmit: methods.handleSubmit(onSubmit), noValidate: true }, rest)) }));
 };
 
 // src/lib/Datepicker.tsx
 import { Datepicker } from "@availity/mui-datepicker";
-import { useFormContext as useFormContext5, Controller as Controller4 } from "react-hook-form";
+import { Controller as Controller5 } from "react-hook-form";
 import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var ControlledDatepicker = (_a) => {
   var _b = _a, {
@@ -376,12 +368,10 @@ var ControlledDatepicker = (_a) => {
     "value",
     "FieldProps"
   ]);
-  const { control } = useFormContext5();
   return /* @__PURE__ */ jsx6(
-    Controller4,
+    Controller5,
     {
       name,
-      control,
       defaultValue,
       rules: {
         deps,
@@ -420,7 +410,7 @@ var ControlledDatepicker = (_a) => {
 
 // src/lib/Input.tsx
 import { Input } from "@availity/mui-form-utils";
-import { useFormContext as useFormContext6 } from "react-hook-form";
+import { Controller as Controller6 } from "react-hook-form";
 import { jsx as jsx7 } from "react/jsx-runtime";
 var ControlledInput = (_a) => {
   var _b = _a, {
@@ -432,7 +422,7 @@ var ControlledInput = (_a) => {
     min,
     pattern,
     validate,
-    setValueAs,
+    defaultValue,
     disabled,
     onChange,
     onBlur,
@@ -448,7 +438,7 @@ var ControlledInput = (_a) => {
     "min",
     "pattern",
     "validate",
-    "setValueAs",
+    "defaultValue",
     "disabled",
     "onChange",
     "onBlur",
@@ -456,34 +446,41 @@ var ControlledInput = (_a) => {
     "shouldUnregister",
     "deps"
   ]);
-  const { register, getFieldState } = useFormContext6();
   return /* @__PURE__ */ jsx7(
-    Input,
-    __spreadValues(__spreadProps(__spreadValues({}, rest), {
-      error: !!getFieldState(name).error,
-      required: typeof required === "object" ? required.value : !!required
-    }), register(name, {
-      required,
-      maxLength,
-      minLength,
-      max,
-      min,
-      pattern,
-      validate,
-      setValueAs,
+    Controller6,
+    {
+      name,
+      defaultValue,
       disabled,
-      onChange,
-      onBlur,
-      value,
+      rules: {
+        required,
+        maxLength,
+        minLength,
+        max,
+        min,
+        pattern,
+        validate,
+        onChange,
+        onBlur,
+        value,
+        shouldUnregister,
+        deps
+      },
       shouldUnregister,
-      deps
-    }))
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx7(
+        Input,
+        __spreadProps(__spreadValues(__spreadValues({}, rest), field), {
+          error: !!error,
+          required: typeof required === "object" ? required.value : !!required
+        })
+      )
+    }
   );
 };
 
 // src/lib/OrganizationAutocomplete.tsx
 import { OrganizationAutocomplete } from "@availity/mui-autocomplete";
-import { useFormContext as useFormContext7, Controller as Controller5 } from "react-hook-form";
+import { Controller as Controller7 } from "react-hook-form";
 import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var ControlledOrganizationAutocomplete = (_a) => {
   var _b = _a, {
@@ -511,14 +508,10 @@ var ControlledOrganizationAutocomplete = (_a) => {
     "value",
     "FieldProps"
   ]);
-  var _a2;
-  const { control, getFieldState } = useFormContext7();
-  const errorMessage = (_a2 = getFieldState(name).error) == null ? void 0 : _a2.message;
   return /* @__PURE__ */ jsx8(
-    Controller5,
+    Controller7,
     {
       name,
-      control,
       defaultValue,
       rules: {
         deps,
@@ -531,14 +524,14 @@ var ControlledOrganizationAutocomplete = (_a) => {
         value
       },
       shouldUnregister,
-      render: ({ field: { onChange: onChange2, value: value2, onBlur: onBlur2 } }) => /* @__PURE__ */ jsx8(
+      render: ({ field: { onChange: onChange2, value: value2, onBlur: onBlur2 }, fieldState: { error } }) => /* @__PURE__ */ jsx8(
         OrganizationAutocomplete,
         __spreadProps(__spreadValues({}, rest), {
           FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
             required: typeof required === "object" ? required.value : !!required,
-            error: !!errorMessage,
-            helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ jsxs5(Fragment5, { children: [
-              errorMessage,
+            error: !!error,
+            helperText: (error == null ? void 0 : error.message) ? /* @__PURE__ */ jsxs5(Fragment5, { children: [
+              error.message,
               /* @__PURE__ */ jsx8("br", {}),
               FieldProps == null ? void 0 : FieldProps.helperText
             ] }) : FieldProps == null ? void 0 : FieldProps.helperText
@@ -559,7 +552,7 @@ var ControlledOrganizationAutocomplete = (_a) => {
 
 // src/lib/ProviderAutocomplete.tsx
 import { ProviderAutocomplete } from "@availity/mui-autocomplete";
-import { useFormContext as useFormContext8, Controller as Controller6 } from "react-hook-form";
+import { Controller as Controller8 } from "react-hook-form";
 import { Fragment as Fragment6, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var ControlledProviderAutocomplete = (_a) => {
   var _b = _a, {
@@ -595,14 +588,10 @@ var ControlledProviderAutocomplete = (_a) => {
     "value",
     "FieldProps"
   ]);
-  var _a2;
-  const { control, getFieldState } = useFormContext8();
-  const errorMessage = (_a2 = getFieldState(name).error) == null ? void 0 : _a2.message;
   return /* @__PURE__ */ jsx9(
-    Controller6,
+    Controller8,
     {
       name,
-      control,
       defaultValue,
       rules: {
         deps,
@@ -619,14 +608,14 @@ var ControlledProviderAutocomplete = (_a) => {
         value
       },
       shouldUnregister,
-      render: ({ field: { onChange: onChange2, value: value2, onBlur: onBlur2 } }) => /* @__PURE__ */ jsx9(
+      render: ({ field: { onChange: onChange2, value: value2, onBlur: onBlur2 }, fieldState: { error } }) => /* @__PURE__ */ jsx9(
         ProviderAutocomplete,
         __spreadProps(__spreadValues({}, rest), {
           FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
             required: typeof required === "object" ? required.value : !!required,
-            error: !!errorMessage,
-            helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ jsxs6(Fragment6, { children: [
-              errorMessage,
+            error: !!error,
+            helperText: (error == null ? void 0 : error.message) ? /* @__PURE__ */ jsxs6(Fragment6, { children: [
+              error.message,
               /* @__PURE__ */ jsx9("br", {}),
               FieldProps == null ? void 0 : FieldProps.helperText
             ] }) : FieldProps == null ? void 0 : FieldProps.helperText
@@ -647,7 +636,7 @@ var ControlledProviderAutocomplete = (_a) => {
 
 // src/lib/RadioGroup.tsx
 import { RadioGroup } from "@availity/mui-form-utils";
-import { useFormContext as useFormContext9, Controller as Controller7 } from "react-hook-form";
+import { Controller as Controller9 } from "react-hook-form";
 import { FormControl, FormLabel, FormHelperText } from "@availity/mui-form-utils";
 import { Fragment as Fragment7, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var ControlledRadioGroup = (_a) => {
@@ -674,22 +663,18 @@ var ControlledRadioGroup = (_a) => {
     "shouldUnregister",
     "value"
   ]);
-  var _a2;
-  const { control, getFieldState } = useFormContext9();
-  const errorMessage = (_a2 = getFieldState(name).error) == null ? void 0 : _a2.message;
   return /* @__PURE__ */ jsx10(
-    Controller7,
+    Controller9,
     {
-      control,
       name,
       defaultValue,
       rules: { deps, onBlur, onChange, required, shouldUnregister, value },
       shouldUnregister,
-      render: ({ field }) => /* @__PURE__ */ jsxs7(FormControl, { error: !!errorMessage, children: [
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsxs7(FormControl, { error: !!error, children: [
         /* @__PURE__ */ jsx10(FormLabel, { required: typeof required === "object" ? required.value : !!required, children: label }),
         /* @__PURE__ */ jsx10(RadioGroup, __spreadValues(__spreadValues({}, field), rest)),
-        /* @__PURE__ */ jsx10(FormHelperText, { children: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ jsxs7(Fragment7, { children: [
-          errorMessage,
+        /* @__PURE__ */ jsx10(FormHelperText, { children: (error == null ? void 0 : error.message) ? /* @__PURE__ */ jsxs7(Fragment7, { children: [
+          error.message,
           /* @__PURE__ */ jsx10("br", {}),
           helperText
         ] }) : helperText })
@@ -700,7 +685,7 @@ var ControlledRadioGroup = (_a) => {
 
 // src/lib/Select.tsx
 import { Select } from "@availity/mui-form-utils";
-import { useFormContext as useFormContext10 } from "react-hook-form";
+import { Controller as Controller10 } from "react-hook-form";
 import { jsx as jsx11 } from "react/jsx-runtime";
 var ControlledSelect = (_a) => {
   var _b = _a, {
@@ -712,11 +697,11 @@ var ControlledSelect = (_a) => {
     min,
     pattern,
     validate,
-    setValueAs,
     disabled,
     onChange,
     onBlur,
     value,
+    defaultValue,
     shouldUnregister,
     deps
   } = _b, rest = __objRest(_b, [
@@ -728,42 +713,49 @@ var ControlledSelect = (_a) => {
     "min",
     "pattern",
     "validate",
-    "setValueAs",
     "disabled",
     "onChange",
     "onBlur",
     "value",
+    "defaultValue",
     "shouldUnregister",
     "deps"
   ]);
-  const { register, getFieldState } = useFormContext10();
   return /* @__PURE__ */ jsx11(
-    Select,
-    __spreadValues(__spreadProps(__spreadValues({}, rest), {
-      error: !!getFieldState(name).error,
-      required: typeof required === "object" ? required.value : !!required
-    }), register(name, {
-      required,
-      maxLength,
-      minLength,
-      max,
-      min,
-      pattern,
-      validate,
-      setValueAs,
+    Controller10,
+    {
+      name,
+      defaultValue,
       disabled,
-      onChange,
-      onBlur,
-      value,
+      rules: {
+        required,
+        maxLength,
+        minLength,
+        max,
+        min,
+        pattern,
+        validate,
+        onChange,
+        onBlur,
+        value,
+        shouldUnregister,
+        deps
+      },
       shouldUnregister,
-      deps
-    }))
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx11(
+        Select,
+        __spreadProps(__spreadValues(__spreadValues({}, rest), field), {
+          error: !!error,
+          required: typeof required === "object" ? required.value : !!required
+        })
+      )
+    }
   );
 };
 
 // src/lib/TextField.tsx
 import { TextField } from "@availity/mui-textfield";
-import { useFormContext as useFormContext11 } from "react-hook-form";
+import { Controller as Controller11 } from "react-hook-form";
 import { Fragment as Fragment8, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 var ControlledTextField = (_a) => {
   var _b = _a, {
@@ -776,8 +768,8 @@ var ControlledTextField = (_a) => {
     min,
     pattern,
     validate,
-    setValueAs,
     disabled,
+    defaultValue,
     onChange,
     onBlur,
     value,
@@ -793,44 +785,48 @@ var ControlledTextField = (_a) => {
     "min",
     "pattern",
     "validate",
-    "setValueAs",
     "disabled",
+    "defaultValue",
     "onChange",
     "onBlur",
     "value",
     "shouldUnregister",
     "deps"
   ]);
-  var _a2;
-  const { register, getFieldState } = useFormContext11();
-  const errorMessage = (_a2 = getFieldState(name).error) == null ? void 0 : _a2.message;
   return /* @__PURE__ */ jsx12(
-    TextField,
-    __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, rest), {
-      required: typeof required === "object" ? required.value : !!required
-    }), register(name, {
-      required,
-      maxLength,
-      minLength,
-      max,
-      min,
-      pattern,
-      validate,
-      setValueAs,
+    Controller11,
+    {
+      name,
+      defaultValue,
       disabled,
-      onChange,
-      onBlur,
-      value,
+      rules: {
+        required,
+        maxLength,
+        minLength,
+        max,
+        min,
+        pattern,
+        validate,
+        onChange,
+        onBlur,
+        value,
+        shouldUnregister,
+        deps
+      },
       shouldUnregister,
-      deps
-    })), {
-      error: !!getFieldState(name).error,
-      helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ jsxs8(Fragment8, { children: [
-        errorMessage,
-        /* @__PURE__ */ jsx12("br", {}),
-        helperText
-      ] }) : helperText
-    })
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx12(
+        TextField,
+        __spreadProps(__spreadValues(__spreadValues({}, rest), field), {
+          required: typeof required === "object" ? required.value : !!required,
+          error: !!error,
+          helperText: (error == null ? void 0 : error.message) ? /* @__PURE__ */ jsxs8(Fragment8, { children: [
+            error.message,
+            /* @__PURE__ */ jsx12("br", {}),
+            helperText
+          ] }) : helperText
+        })
+      )
+    }
   );
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-controlled-form",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Availity MUI ControlledForm Component - part of the @availity/element design system",
   "keywords": [
     "react",

package/src/lib/AsyncAutocomplete.tsx

@@ -1,5 +1,5 @@
 import { AsyncAutocomplete, AsyncAutocompleteProps } from '@availity/mui-autocomplete';
-import { useFormContext, RegisterOptions, FieldValues, Controller, ControllerProps } from 'react-hook-form';
+import { RegisterOptions, FieldValues, Controller, ControllerProps } from 'react-hook-form';
 import { ChipTypeMap } from '@mui/material/Chip';
 
 export type ControlledAsyncAutocompleteProps<
@@ -35,12 +35,9 @@ export const ControlledAsyncAutocomplete = <
   FieldProps,
   ...rest
 }: ControlledAsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>) => {
-  const { control, getFieldState } = useFormContext();
-  const errorMessage = getFieldState(name).error?.message;
   return (
     <Controller
       name={name}
-      control={control}
       defaultValue={rest.defaultValue}
       rules={{
         deps,
@@ -57,23 +54,22 @@ export const ControlledAsyncAutocomplete = <
         value,
       }}
       shouldUnregister={shouldUnregister}
-      render={({ field: { onChange, value, onBlur } }) => (
+      render={({ field: { onChange, value, onBlur }, fieldState: { error } }) => (
         <AsyncAutocomplete
           {...rest}
           FieldProps={{
             ...FieldProps,
             required: typeof required === 'object' ? required.value : !!required,
-            error: !!errorMessage,
-            helperText:
-              errorMessage && typeof errorMessage === 'string' ? (
-                <>
-                  {errorMessage}
-                  <br />
-                  {FieldProps?.helperText}
-                </>
-              ) : (
-                FieldProps?.helperText
-              ),
+            error: !!error,
+            helperText: error?.message ? (
+              <>
+                {error.message}
+                <br />
+                {FieldProps?.helperText}
+              </>
+            ) : (
+              FieldProps?.helperText
+            ),
           }}
           onChange={(event, value, reason) => {
             if (reason === 'clear') {