How to Fix First and Last Column in react-virtualized List?

I am working with react-virtualized and have a custom header along with a long list. I was able to fix (freeze) the first and last columns in the header while scrolling horizontally, but I am unable to do the same for the first and last columns in the virtualized list where rows are rendered.

I have tried setting position: sticky and position: fixed, but neither approach works as expected.

Here is a CodeSandbox link for reference: https://codesandbox.io/p/sandbox/great-sun-5d9z4d?file=%2Fsrc%2FApp.js%3A1%2C1-423%2C1How can I properly fix the first and last columns in the virtualized list? Any guidance would be appreciated.