update packages and bring some of fields to show loan page

src/core/components/SelectBox.jsx

@@ -1,52 +1,60 @@
 import {FormControl, FormHelperText, InputLabel, MenuItem, Select,} from "@mui/material";
+import {useTranslations} from "next-intl";
 
 function SelectBox({
                        select,
-                       selectType,
+                       name,
                        selectors,
                        label,
-                       setFieldValue,
-                       setFieldTouched,
+                       handleChange,
                        error,
+                       onBlur,
+                       disabled,
                        helperText,
+                       isLoading,
+                       errorEcured,
+                       variant
                    }) {
+    const t = useTranslations();
 
-    const selectId = String(select);
-    const handleChange = (event) => {
-        setFieldValue(selectType, event.target.value);
-    };
-    const handleBlur = () => {
-        setFieldTouched(select, true);
-    };
     return (
         <FormControl
-            variant="outlined"
+            disabled={disabled || false}
+            variant={variant || "outlined"}
             margin="normal"
             fullWidth
             size="small"
             error={error}
             sx={{mt: 0}}
         >
-            <InputLabel id="language-label">{label}</InputLabel>
+            <InputLabel>{label}</InputLabel>
             <Select
-                labelId="language-label"
-                id={selectId}
-                name={selectId}
+                label={label}
+                name={name}
                 size="small"
-                value={select}
+                value={isLoading ? "" : select}
                 onChange={handleChange}
-                label="Language"
-                onBlur={handleBlur}
+                onBlur={onBlur}
+
             >
-                {selectors.map((selector) => (
-                    <MenuItem key={selector.id} value={selector.value}>
-                        {selector.name}
+                {isLoading ? (
+                    <MenuItem
+                        sx={{color: "primary.main"}}>{t("LoanRequest.text_field_loading_provinces_list")}</MenuItem>
+                ) : errorEcured ? (
+                    <MenuItem sx={{color: "secondary.main"}}>
+                        {t("LoanRequest.text_field_error_fetching_provinces")}
                     </MenuItem>
-                ))}
+                ) : (
+                    selectors.map((selector) => (
+                        <MenuItem key={selector.id} value={selector.value}>
+                            {selector.name}
+                        </MenuItem>
+                    ))
+                )}
             </Select>
             <FormHelperText>{helperText}</FormHelperText>
         </FormControl>
     );
 }
 
-export default SelectBox;
+export default SelectBox;