In base I have a list of filter chips. This chips are li elements and placed in the ul parent element:

<Stack
  className={`${className} filter-list`}
  width='100%'
  component='ul'
  padding={0}
  margin={0}
  spacing={1.5}
  direction='row'
  useFlexGap
  flexWrap='wrap'>
  <FilterButtonMolecule className='filter-list__filter-button' />
  {currentFilters.map((filter) => (
      <Box
        className='filter-list__item'
        component='li'
        key={filter.id}
        sx={{ listStyle: 'none' }}>
        <FilterChipMolecule
          className='filter-list__item-chip'
          filter={filter}
        />
      </Box>
    ))}
</Stack>

The flexWrap and flexGap properties are specifically applied in the parent ul so that the children li are moved depending on the size of the parent ul. Everything works as intended.

But now I needed to add another button to the upper-right corner without breaking the moving of elements, e.g. :

Is this even possible?
I’m thinking now of removing the buttons from the list. Put them in the parent, which is made absolute. And add invisible chips to the list, which will displace visible chips from the upper corners. But I would like to ask for advice first.