fixed user form select

src/pages/UserForm/UserForm.tsx

@@ -6,6 +6,9 @@ import {
   Checkbox,
   CircularProgress,
   FormControlLabel,
+  InputLabel,
+  MenuItem,
+  Select,
   TextField,
   Typography,
 } from "@mui/material";
@@ -133,18 +136,17 @@ const UserForm = () => {
               : "Index does not exist"
           }
         />
-
-        <TextField
-          select
-          label="Role"
+        <InputLabel id="role-label">Role</InputLabel>
+        <Select
+          labelId="role-label"
           value={role}
           onChange={(e) => setRole(e.target.value)}
           fullWidth
           sx={{ mb: 3 }}
         >
-          <option value="common">Common</option>
-          <option value="prof">Professor</option>
-        </TextField>
+          <MenuItem value="common">Common</MenuItem>
+          <MenuItem value="prof">Professor</MenuItem>
+        </Select>
 
         <FormControlLabel
           control={