How to show one horizontal scrollbar for pinned and non-pinned columns?

I'm using AG Grid in React and have some columns pinned to the left.

AG Grid is showing two horizontal scrollbars — one for pinned columns and one for non-pinned columns.

I want to show only one horizontal scrollbar that scrolls the non-pinned columns, while keeping the pinned columns fixed.

How can I achieve this?

<Box className="ag-theme-alpine" sx={{ width: "100%", height: "550px" }}>
        <AgGridReact
          ref={gridRef}
          rowData={paginatedData}
          columnDefs={columnDefs}
          defaultColDef={{
            resizable: true,
            sortable: true,
            filter: true,
            headerClass: "custom-header",
          }}
          pagination={false}
          rowHeight={45}
          domLayout="normal"
        />
      </Box>

Right now, I'm seeing three horizontal scrollbars in AG Grid:

One for the first 3 pinned columns on the left

One for the last pinned column on the right

One for the middle scrollable columns

I want to have only one horizontal scrollbar — just for the scrollable (non-pinned) columns. The pinned columns should stay fixed, but without their own scrollbars.

const columns = [
  {
    field: "a",
    headerName: "A",
    pinned: "left",
    minWidth: 50,
    cellStyle: { textAlign: "center" }
  },
  {
    field: "b",
    headerName: "B",
    minWidth: 84,
    pinned: "left",
  },
  {
    field: "c",
    headerName: "C",
    minWidth: 209,
    pinned: "left",
    cellStyle: { fontSize: '14px' }
  },
  {
    field: "d",
    headerName: "D",
    minWidth: 120,
    cellStyle: { textAlign: "center" }
  },
  {
    field: "e",
    headerName: "E",
    minWidth: 240,
  },
  {
    field: "f",
    headerName: "F",
    minWidth: 95,
    cellStyle: { textAlign: "center" }
  },
  {
    field: "g",
    headerName: "G",
    minWidth: 161
  },
  {
    field: "h",
    headerName: "H",
    minWidth: 105,
    cellStyle: { textAlign: "center" }
  },
  {
    field: "i",
    headerName: "I",
    minWidth: 50,
    cellStyle: { textAlign: "center" }
  },
  {
    field: "j",
    headerName: "J",
    minWidth: 100,
    pinned: "right",
    cellStyle: { textAlign: "center" }
  }
];

export default columns;

To resolve this, I disabled the horizontal spacers that AG Grid adds for pinned sections by applying the following CSS:

.ag-horizontal-left-spacer{
  display: none !important;
}
.ag-horizontal-right-spacer{
  display: none !important;
}

This removed the additional scrollbars under the pinned columns, resulting in a clean layout with only one horizontal scrollbar for the main scrollable area.