Add a filter in the interactions screen

[stasel]

Requirements

1. Show a drop down on the interactions page with multi selection for all filters
2. Default: empty drop down - no filters and all interactions are shown
3. Click on the 'clear' button cleans up the filters to the default state
4. Show 'clear' button if there is at least one filter selected. Hide it otherwise
5. Filtering will happen on the client side only, after fetching the data
6. It is not required to remember the filter state between refreshes or changing profiles
7. Use MUI's Select component with multiple selection enabled with chips

Example dropdown code

    <Select
          labelId="demo-multiple-chip-label"
          id="demo-multiple-chip"
          multiple
          value={personName}
          onChange={handleChange}
          input={<OutlinedInput id="select-multiple-chip" label="Filter" />}
          renderValue={(selected) => (
            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
              {selected.map((value) => (
                <Chip key={value} label={value} />
              ))}
            </Box>
          )}
          MenuProps={MenuProps}
        >
          {names.map((name) => (
            <MenuItem
              key={name}
              value={name}
              style={getStyles(name, personName, theme)}
            >
              {name}
            </MenuItem>
          ))}
        </Select>

Mockup