refactor: add gender selection to Form component and update DefaultSelect for improved option handling

app/component/selectors/DefaultSelect.js

@@ -10,19 +10,19 @@ function DefaultSelect({ list, value, updateData, label, error, name }) {
       value={value || ""}
       getOptionLabel={(option) => {
         if (typeof option === "string") return option;
-        return option?.name || option?.label || "";
+        return option?.title || option?.name || option?.label || "";
       }}
       className="!w-full !rounded-lg auto-complete-selector"
       onChange={(_, newValue) => {
-        updateData(name, newValue?.label || newValue || "");
+        updateData(name, newValue?.id || newValue?.label || newValue || "");
       }}
       sx={{
         ...styleTextSelectRight,
         // Hide Icon Number
         "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
-          {
-            display: "none",
-          },
+        {
+          display: "none",
+        },
         "& input[type=number]": {
           MozAppearance: "textfield",
         },
@@ -43,13 +43,13 @@ function DefaultSelect({ list, value, updateData, label, error, name }) {
             : "1px solid #D7D7D7 !important",
         },
         "& .MuiInput-underline:hover:not(.Mui-disabled):before, .MuiOutlinedInput-notchedOutline":
-          {
-            borderColor: error ? "red !important" : "#D7D7D7 !important",
-          },
+        {
+          borderColor: error ? "red !important" : "#D7D7D7 !important",
+        },
         "& .muirtl-1kiro5a-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
-          {
-            border: "1px solid #5559CE !important",
-          },
+        {
+          border: "1px solid #5559CE !important",
+        },
       }}
       renderOption={(props, option) => (
         <Button
@@ -58,7 +58,7 @@ function DefaultSelect({ list, value, updateData, label, error, name }) {
           key={option.id || props.id}
           className="!flex !justify-start !p-[8px] !text-start !text-[#A1A1A1] hover:dark:!bg-[#35343D] !bg-[#FFF] dark:!bg-[#1F1D2B]"
         >
-          {option.name || option.label}
+          {option.title || option.name || option.label}
         </Button>
       )}
       renderInput={(params) => (