Shadow on scrolled for Dialog content from Material-UI

I'm using Material-UI V4 library to create a React JS app.

I'm using the scrolling long content dialog example here https://v4.mui.com/components/dialogs/#scrolling-long-content.

What I want is to show a soft box-shadow at the top or bottom at the Dialog Content when the Dialog Content is scrolled like these 2 images below:

I found an example using a simple element (written in HTML and CSS) here How do I add a top and bottom shadow while scrolling but only when needed?.

I tried to implement the sample above in my Custom Dialog Content component but it didn't work as expected (no soft box-shadow appeared).

Here is the code for the Custom Dialog Content component:

// MATERIAL UI CORES
import DialogContent from "@material-ui/core/DialogContent";
import { withStyles } from "@material-ui/core/styles";

const CustomDialogContent = withStyles((theme) => ({
  root: {
    // SCROLLBAR
    "&::-webkit-scrollbar": {
      width: 5,
      height: 5,
      backgroundColor: "whitesmokeGray"
    },
    "&::-webkit-scrollbar-thumb": {
      width: 5,
      height: 5,
      backgroundColor: "darkgray"
    },

    // SHADOW ON SCROLL
    background:
      "linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%",
    background:
      "linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%",
    backgroundRepeat: "no-repeat",
    backgroundColor: "white",
    backgroundSize: "100% 40px, 100% 40px, 100% 14px, 100% 14px,",
    backgroundAttachment: "local, local, scroll, scroll,"
  }
}))(DialogContent);

export default CustomDialogContent;

Here is the full code: https://codesandbox.io/s/long-scroll-dialog-material-ui-ecicb?file=/src/CustomContentDialog.js

So, how can I show a soft box-shadow at the top or bottom at the Custom Dialog Content when the Custom Dialog Content is scrolled.