reorder chips mui autocomplete and react dnd

Question

Hi im trying to be able to reorder the chips inside mui autocomplete, I have encountered with react-beautiful-dnd but there is a problem when the chips are wrapped, is there any solution? or in the other hand I will like help for making the chips div scrollable

The code:

<AutoComplete
  sx={{
    margin: '10px 0',
    minWidth: '250px',
    width: '100%',
    '& .MuiOutlinedInput-root': {
      overflow: 'auto',
    },
  }}
  renderInput={(params, error) => (
    <TextField {...params} error={error} label={'label'} size="small" />
  )}
  groupBy={({ group }) => group}
  options={memoizedChartList}
  onChange={async (event, onFieldChange, selectedOptions) => {
    onChange()
}}
  renderTags={(chips, getChipProps) => {
    return (
      <DragDropContext onDragEnd={() => {}}>
        <Droppable droppableId="table-body" direction="horizontal">
          {provided => (
            <div
              ref={provided.innerRef}
              {...provided.droppableProps}
              style={{
                display: 'flex',
                flexWrap: 'nowrap',
                overflow: 'auto',
                maxWidth: '100%',
              }}>
              {chips.map((option, index) => {
                return (
                  <Draggable key={option.name} draggableId={`q-${option.name}`} index={index}>
                    {(
                      provided, // eslint-disable-line
                      snapshot // eslint-disable-line
                    ) => {
                      return (
                        <Chip
                          ref={provided.innerRef}
                          {...provided.draggableProps}
                          {...provided.dragHandleProps}
                          isDragging={snapshot.isDragging}
                          label={`${option.displayName} - ${option.name}`}
                          {...getChipProps({ index })}
                        />
                      )
                    }}
                  </Draggable>
                )
              })}
            </div>
          )}
        </Droppable>
      </DragDropContext>
    )
  }}
/>

any help will be widely appreciated

I will like to at least scroll in and not wrapped, or If you have a solution for wrapped elements, I will like to hear about it.