I need to set data in initial state of multiselect with some condition

Question

My task is o need to set initial data depending on validating condition mean that condition will validate this will be stored in the initial screen and then show in UI but right now that not working properly need to set properly if the first condition is validated then in UI ["San", "grapefruit", "lime", "coconut", "mango"] this will visible

const [select, setSelect] = React.useState([]);

function Permission(appName, user) {
  let conditionOne =
    user?.app_permission == true &&
    user?.corp_permission == true &&
    appName == "@common";
  let conditionTwo =
    user?.app_permission == true &&
    user?.corp_permission == false &&
    appName == "@common";
  let conditionThree =
    user?.corp_permission == true &&
    user?.app_permission == false &&
    appName == "@common";

  if (conditionOne) {
    setSelect(["San", "grapefruit", "lime", "coconut", "mango"]);
  }
  if (conditionTwo) {
    setSelect(["San", "grapefruit", "lime", "coconut"]);
  }
  if (conditionThree) {
    setSelect(["San", "grapefruit", "lime", "mango"]);
  }
  setSelect(["San", "grapefruit", "lime"]);
}

React.useEffect(() => {
  LegalCropPermission(appName, user);
}, [user, appName]);

const downloadsForm = useFormik({
  initialValues: {
    listType: select,
  },
  validationSchema: validationFormSchema,
  onSubmit: (values) => {
    fetchDownloads(values);
  },
});
<Grid item xs={6} className={classes.formGrid}>
  <MultiSelect
    label="List Type"
    onChange={downloadsForm.handleChange}
    value={downloadsForm.values.listType}
    name="listType"
    error={downloadsForm.errors.listType}
    opts={[
      { label: "San", value: "San" },
      { label: "grapefruit", value: "grapefruit" },
      { label: "lime", value: "lime" },
      { label: "coconut", value: "coconut" },
      { label: "mango", value: "mango" },
    ]}
    variant="outlined"
    size="small"
    noLaunchIcon={true}
    showLimited={false}
  />
</Grid>;

CodeSankBox Link

Answer 1

You were using incorrect key values, corrected below:

let conditionOne =
  user?.legal_permission == true &&
  user?.corporate_permission == true &&
  appName == "@common";
let conditionTwo =
  user?.legal_permission == true &&
  user?.corporate_permission == false &&
  appName == "@common";
let conditionThree =
  user?.corporate_permission == true &&
  user?.legal_permission == false &&
  appName == "@common";
if (conditionOne) {
  setSelect(["San", "grapefruit", "lime", "coconut", "mango"]);
}
else if (conditionTwo) {
  setSelect(["San", "grapefruit", "lime", "coconut"]);
}
else if (conditionThree) {
  setSelect(["San", "grapefruit", "lime", "mango"]);
}
else{
setSelect(["San", "grapefruit", "lime"]);
}

Correction in Select tag in render:

<Select
        labelId="demo-customized-select-label"
        id="demo-customized-select"
        name="listType"
        multiple
        value={downloadsForm.values.listType}
        onChange={downloadsForm.handleChange}
      >
        {
          select.map((item) => <MenuItem value={item}>{item}</MenuItem>)
        }
</Select>