React beautiful dnd auto scroll x when i dragging into columns

I have columns with a defined width and a container of a certain size that is covered by overflow-x. When I try to drag to the last column it doesn't automatically scroll horizontally. I leave the styles and components

When I delete the overflow property of the main section of the grid the dragging scroll works but the screen breaks

Main Grid Style

 grid-area: content;
  padding: 30px 20px;
  max-height: calc(100vh - 55px);
  overflow-x: hidden; 

Table.tsx

<DragDropContext onDragEnd={onDragEnd}>
    <Droppable droppableId="all-column" type="card" direction="horizontal">
      {(provided) => (
        <ScrollTable>
          {mappedItems(elements).map((el, index) => (
            <TableWrapper
              ref={provided.innerRef}
              {...provided.droppableProps}
              className={el.prefix === "Descartados" ? "overlay" : ""}
              key={el.prefix}
            >
              <TableTitle>{el.prefix}</TableTitle>
              <Droppable
                droppableId={el.prefix}
                type="task"
                direction="vertical"
              >
                {(provided) => (
                  <TableColumn
                    {...provided.droppableProps}
                    ref={provided.innerRef}
                  >
                    {el.elements.map((element, index) => (
                      <>
                        <TableItem
                          onClick={() => {
                            setCurrentTalent(element.id);
                            dispatch(showModal("talent-side-modal"));
                          }}
                          className={
                            el.prefix === "Descartados" ? "overlay" : ""
                          }
                          key={element.id}
                          id={element.id}
                          index={index}
                        ></TableItem>
                      </>
                    ))}
                    {provided.placeholder}
                  </TableColumn>
                )}
              </Droppable>
            </TableWrapper>
          ))}
        </ScrollTable>
      )}
    </Droppable>
  </DragDropContext>

ScrollTable.ts

const ScrollTable = styled("div")`
  width: 1200px;
  overflow: auto;
  padding-bottom: 20px;
  border-radius: 0px 5px;
  display: flex;

Overflow-y:auto inside columns was breaking x-scroll