How do I set the material react table pinned column and selected row's transparency to "0"?

Question

I am using Material React table text. I have rowSlection and columnPinning options enabled for my table. The pinned columns have a certain level of transparency by default which I have overridden using:

muiTableBodyCellProps: ({ column, row }) => {
            return ({
                //conditionally style pinned columns
                sx: {
                    backgroundColor: column.getIsPinned() ? "white" : undefined,
                },
            })
        }

This works perfectly, but as soon as I select the row, the pinned column's transparency increases and the elements below it become visible. This becomes much more visible when I hover over that row.

How do I set the transparency of the pinned column to "0" when selected and hovered over it?

muiTableBodyCellProps: ({ column, row }) => {
            return ({
                //conditionally style pinned columns
                sx: {
                    backgroundColor: column.getIsPinned() ? "white" : undefined,
                    // conditionally style column 
                    "&:hover": {
                        // backgroundColor: column.getIsPinned() && row.getIsSelected() ? "white" : undefined,
                        backgroundColor: "red",
                    }
                },
            })
        }

I tried targeting the hover state like so but it does nothing.