React MUI: Value selection issue and missing default value

Question

I'm creating a form in react using mui and formik. While using select I set default value using object from api but select is not working properly. I cannot select a value and the default value is not selected by default. Here is the code:

import { Box, Button, FormControl, InputLabel, Select, TextField } from "@mui/material";
import React, { useEffect, useState } from "react";
import { useLocation, useParams } from "react-router-dom";
import { Formik } from "formik";
import * as yup from "yup";
import useMediaQuery from "@mui/material/useMediaQuery";
import Header from "../../components/Header";
import useAuth from "../../hooks/useAuth";
import axios from "axios";
import { MenuItem } from "react-pro-sidebar";

const EditEmployee = () => {
  const { user_id } = useParams(); // employee id

  const [emp, setEmployee] = useState({});
  const [Companies, setCompanies] = useState([]);
  const [defcompany, setDefcompany] = useState("");
  const [CompanyId, setCompanyId] = useState(null);

  const handleChange = (event) => {
    setDefcompany(event.target.value);
  };

  const { auth } = useAuth();

  //   get companies
  const GetCompanies = () => {
    axios.get(`${process.env.REACT_APP_MAIN_API_URL}/companies/`).then(function (res) {
      try {
        var result = res.data;
        // console.log(result);
        setCompanies(result);
      } catch (error) {
        console.log(error);
      }
    });
  };

  useEffect(() => {
    GetCompanies();
  }, []);

  // get companies

  useEffect(() => {
    try {
      const response = axios
        .get(`${process.env.REACT_APP_MAIN_API_URL}/employees/` + user_id, {
          headers: {
            "Content-Type": "application/json",
            //   Authorization: "Bearer " + auth.accessToken
          },
          // withCredentials: true,
        })
        .then((response) => {
          setEmployee(response.data[0]);
          setCompanyId(emp.company_id);
          console.log(response.data[0]);
        });
    } catch (err) {
      console.log(err);

      if (!err?.response) {
        console.log("No server Response");
      } else if (!err?.response?.status === 400) {
        console.log("Missing username or password");
      } else if (!err?.response?.status === 401) {
        console.log("Unauthorized");
      } else {
        console.log("Login Failed");
      }
    }
  }, []);

  const phoneRegExp = /^((\+[1-9]{1,4}[ -]?)|(\([0-9]{2,3}\)[ -]?)|([0-9]{2,4})[ -]?)*?[0-9]{3,4}[ -]?[0-9]{3,4}$/;

  const userSchema = yup.object().shape({
    first_name: yup.string().required("required"),
    last_name: yup.string().required("required"),
    email: yup.string().email("Invalid email").required("required"),
    contact_no: yup.string().matches(phoneRegExp, "Phone number is not valid").required("required"),
    // address1: yup.string().required("required"),
    // address2: yup.string().required("required"),
  });

  const isNonMobile = useMediaQuery("(min-width:600px)");

  const handleFormSubmit = (values) => {
    console.log("VALUES");
    console.log(values);
  };

  return (
    <Box m="20px">
      <Header title="Editing" subtitle={`${emp.first_name} ${emp.last_name} ( ${emp.employee_id} )`}></Header>

      <Formik enableReinitialize={true} onSubmit={handleFormSubmit} initialValues={emp} validationSchema={userSchema}>
        {({ values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting }) => (
          <form onSubmit={handleSubmit}>
            <Box
              display="grid"
              gap="30px"
              gridTemplateColumns="repeat(4,minmax(0,1fr))"
              sx={{
                "& >div": { gridColumn: isNonMobile ? undefined : "span 4" },
              }}
            >
              <TextField
                fullWidth
                variant="outlined"
                type="text"
                label="First Name"
                InputLabelProps={{ shrink: true }}
                onBlur={handleBlur}
                onChange={handleChange}
                value={values.first_name}
                name="first_name"
                error={!!touched.first_name && !!errors.first_name}
                helperText={touched.first_name && errors.first_name}
                sx={{ gridColumn: "span 1" }}
                size="small"
              />

              <TextField
                fullWidth
                variant="outlined"
                type="text"
                label="Last Name"
                InputLabelProps={{ shrink: true }}
                onBlur={handleBlur}
                onChange={handleChange}
                value={values.last_name}
                name="last_name"
                error={!!touched.last_name && !!errors.last_name}
                helperText={touched.last_name && errors.last_name}
                sx={{ gridColumn: "span 1" }}
                size="small"
              />

              <TextField
                fullWidth
                variant="outlined"
                type="text"
                label="Email"
                InputLabelProps={{ shrink: true }}
                onBlur={handleBlur}
                onChange={handleChange}
                value={values.email}
                name="email"
                error={!!touched.email && !!errors.email}
                helperText={touched.email && errors.email}
                sx={{ gridColumn: "span 1" }}
                size="small"
              />

              <TextField
                fullWidth
                variant="outlined"
                type="text"
                label="Phone"
                InputLabelProps={{ shrink: true }}
                onBlur={handleBlur}
                onChange={handleChange}
                value={values.contact_no}
                name="contact_no"
                error={!!touched.contact && !!errors.contact}
                helperText={touched.contact && errors.contact}
                sx={{ gridColumn: "span 1" }}
                size="small"
              />

              <TextField
                fullWidth
                variant="outlined"
                type="text"
                label="Username"
                InputLabelProps={{ shrink: true }}
                onBlur={handleBlur}
                onChange={handleChange}
                value={values.username}
                name="username"
                readOnly
                error={!!touched.contact && !!errors.contact}
                helperText={touched.contact && errors.contact}
                sx={{ gridColumn: "span 1" }}
                size="small"
              />

              <FormControl fullWidth>
                <InputLabel id="company_id">Company</InputLabel>
                <Select
                  labelId="company_id"
                  //   InputLabelProps={{ shrink: true }}
                  name="company_id"
                  fullWidth
                  id="demo-simple-select"
                  value={CompanyId || ""}
                  label="Company"
                  onChange={(e) => setCompanyId(e.target.value)}
                  size="small"
                >
                  {Companies.map((company) => (
                    <MenuItem key={company.company_id} value={company.company_id}>
                      {company.name}
                    </MenuItem>
                  ))}
                </Select>
              </FormControl>

              <TextField
                fullWidth
                variant="outlined"
                type="text"
                label="Department"
                InputLabelProps={{ shrink: true }}
                onBlur={handleBlur}
                onChange={handleChange}
                value={emp.department_id}
                name="department_id"
                error={!!touched.contact && !!errors.contact}
                helperText={touched.contact && errors.contact}
                sx={{ gridColumn: "span 1" }}
                size="small"
              />
              <TextField
                fullWidth
                variant="outlined"
                type="text"
                label="Designation"
                InputLabelProps={{ shrink: true }}
                onBlur={handleBlur}
                onChange={handleChange}
                value={emp.designation_id}
                name="designation_id"
                error={!!touched.contact && !!errors.contact}
                helperText={touched.contact && errors.contact}
                sx={{ gridColumn: "span 1" }}
                size="small"
              />

              <TextField
                fullWidth
                variant="outlined"
                type="text"
                label="Address 1"
                InputLabelProps={{ shrink: true }}
                onBlur={handleBlur}
                onChange={handleChange}
                value={values.address1}
                name="address1"
                error={!!touched.address1 && !!errors.address1}
                helperText={touched.address1 && errors.address1}
                sx={{ gridColumn: "span 2" }}
                size="small"
              />

              <TextField
                fullWidth
                variant="outlined"
                type="text"
                label="Address 2"
                InputLabelProps={{ shrink: true }}
                onBlur={handleBlur}
                onChange={handleChange}
                value={values.address2}
                name="address2"
                error={!!touched.address2 && !!errors.address2}
                helperText={touched.address2 && errors.address2}
                sx={{ gridColumn: "span 2" }}
                size="small"
              />
            </Box>
            <Box display="flex" justifyContent="end" mt="20px">
              <Button type="submit" color="secondary" variant="contained">
                Update
              </Button>
            </Box>
          </form>
        )}
      </Formik>
    </Box>
  );
};

export default EditEmployee;

In addition, I think there are some problems with the chosen style.

Answer 1

So I got the error. I'm using MenuItem

for React Pro sidebar

Should I use MenuItem from mui package