Can't reset selection with Material UI select component

First post about React! I'm new and I try to make a cascading dropdowns (3 levels) with each of one having the same values (same source). There's other functions to validate duplicates selection, but that's not the point of my question. When I select element, it works; the array "levels" is filled, the disabled attribute works, and so on. But when I try to clear all values, the dropdowns (2nd & 3rd) are disabled, but value are displayed.

Here's how a initialize the state columns:

const [selectedColumns, setSelectedColumns] = useState({ levels: [] })

How I handle the selection of element (when adding new selection):

const handleChange = (e, level) => {

  setSelectedColumns(prev => ({
    ...prev,
    levels: selectedColumns.levels.concat(e.target.value),
  }))

}

Clear all function (I try multiple solutions, I've put 2 of them):

const clearAll = () => {
  setSelectedColumns(prev => ({
    ...prev,
    levels: selectedColumns.levels.filter((column, j) => false),
  }))
}

const clearAll = () => {
  setSelectedColumns({ levels: [] })
}

I have 3 dropdown component looking like this one:

<FormControl variant='outlined' theme={theme}>
  <InputLabel htmlFor='level1'>
    Level 1
  </InputLabel>
  <Select
    native
    value={selectedColumns.levels[0]}
    onChange={e => handleChange(e, 1)}
  name='level1'
  inputProps={{
    id: 'level1',
  }}>
  <option value='' />
  {data.map((column, i) => (
    <option key={i} value={column.key}>
      {column.text}
    </option>
  ))}
</Select>

Here's is what it's look like when I click the clear All button. You see the array his cleared but value are still displayed.