How to change button color in React MUI by creating a custom theme?

I am using @mui/material with React + Typescript.

I want to change the warning color of the button by creating a custom theme but so far without success.

My _app.tsx

import {ThemeProvider as MaterialThemeProvider, StyledEngineProvider} from '@mui/material/styles';
import {createTheme} from '@mui/material';
import {green} from '@mui/material/colors';
import { AppProps } from 'next/app';
import Button from '@mui/material/Button';

const MyApp = function ({Component, pageProps}: AppProps) {
    const MaterialUiLight = createTheme({
        palette: {
            warning: {
                light: green[500],
                main: green[500],
            },
        },
    });

    return <StyledEngineProvider injectFirst>
        <MaterialThemeProvider theme={MaterialUiLight}>
            <Button
                variant="contained"
                color="warning"
            >
                Please Change Color
            </Button>
        </MaterialThemeProvider>
    </StyledEngineProvider>
}

Even though I have specified in the palette, warning to have green color I still see the default "orangish" color

So my question is: How can I change the color="warning" or "secondary" for the buttons or overall by using this createTheme function ? Seems like my colors are just ignored...