v5 DataGrid Show column header-row divider on pinned columns

I'm trying to style pinned columns in MUI's DataGrid so that it shows the column header-row divider.

In MUI's official demo for pinned columns [https://codesandbox.io/s/qix39o?file=/demo.tsx], it shows the pinned column header without that bottom outline like this, but I want it to resemble the header-row divider of other non-pinned columns like this (Note the faint gray divider line near the bottom of the screenshot).

Any pointers to CSS classes and properties are appreciated!

EDIT: Here's a side-by-side picture of what I mean for further clarification. enter image description here

EDIT: I got it working. Please see my answer below. Any improvements or feedback is also welcome.

Figured it out below by overriding borderTop property for class .MuiDataGrid-virtualScroller. Thank you for everyone's help!

export default function BasicColumnPinning() {
  return (
    <div style={{ height: 420, width: "100%" }}>
      <DataGridPro
        sx={{
          ".MuiDataGrid-virtualScroller": {
            borderTop: "1px solid rgba(224, 224, 224, 1)"
          }
        }}
        rows={rows}
        columns={columns}
        initialState={{ pinnedColumns: { left: ["name"], right: ["actions"] } }}
      />
    </div>
  );
}