Unselect MUI Multi select with initial value

Question

I got a problem with MUI Select (multiple) inside a Formik form. Suppose that I have a task stored in database with taskName, assignTo (array of staff). Now I'm trying to make a form where I can update/change assignTo values. So the form got initialValues with:

const savedTask = {
  id: 1,
  name: "Task A",
  assignTo: [
    {
      id: 1,
      name: "Oliver Hansen",
      age: 32
    }
  ]
};

and people list

const personList = [
  {
    id: 1,
    name: "Oliver Hansen",
    age: 32
  },
  {
    id: 2,
    name: "Van Henry",
    age: 25
  },
  {
    id: 3,
    name: "Oliver",
    age: 27
  }
];

The problem is I can't unselect "Oliver Hansen" in the update form. When I click on it, it also adds one more "Oliver Hansen".

Codesandbox

Did I implement wrong or that's how formik setFieldValues behaves?

Answer 1

From the Select API page(value prop):

...

If the value is an object it must have reference equality with the option in order to be selected. If the value is not an object, the string representation must match with the string representation of the option in order to be selected.

savedTask.assignTo and personList have different object references even if they have the same value, so you have to use Array.filter to have the initial value of assignTo from personList like this:

const initValues = { 
  ...savedTask, 
  assignTo: personList.filter(person => savedTask.assignTo.some(obj => obj.id === person.id))
};

const formik = useFormik({
  initialValues: initValues,
  onSubmit: (values) => {
    console.log("values submit ", values);
  }
});

Working example: