React-select menu is being hidden by Dialog Content and Dialog Action components

I am new with Material UI and React and have not found on other questions issues with this combination of . I'm trying to develop a Dialog Material UI with React-Select component. The issue is that the menu of react-select on Dialog is being hidden by the Dialog Action component. My Dialog Component

This line below the react-select component is a Paper component rendered by the react-select.

I tried some CSS codes, like zIndex and positions, but still have not found a way to show the menu, or better, make the menu (Paper Component) overlay the Dialog Action component.

My Dialog, Dialog Content and Dialog Action is using the following className:

 dialog: {
        zIndex:0,
        display:'flex',
        flex:1,
        flexGrow:1,
        flexDirection:'column',
        flexWrap: 'wrap',
        height: 'auto',
    },

For the Menu (Paper Component) rendered by the react-select component, i have tried the following ways:

dialogPaper: {
        zIndex: 0,
        maxHeight:300,
        position: 'absolute',
        overflowY:'auto',
        marginTop: theme.spacing(1),
        left:0, right: 0
    },
    paper: {
        zIndex: 1000,
        maxHeight:300,
        position: 'absolute',
        overflow:'visible',
        overflowY:'auto',
        marginTop: theme.spacing(1),
        left:0, right: 0
    },

My code is pretty similar to the Material Docs sections:

• https://material-ui.com/components/dialogs/#form-dialogs
• https://material-ui.com/components/autocomplete/#react-select

Thanks, Yang