Palet UI Material tidak diperbarui

Saya baru mengenal React dan Material UI, saya mencoba menambahkan beberapa gaya khusus ke tombol MUI dengan menggunakan createMuiTheme.

Saya telah mengikuti dokumen dan cukup banyak menyalin contoh tetapi tidak berpengaruh dan tidak ada kesalahan yang terjadi di konsol.

Saya sudah lama membenturkan kepala pada hal ini dan saya tidak dapat melihat apa masalahnya, apa yang saya lewatkan?

import React from 'react';
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import Button from '@material-ui/core/Button';

const mytheme = createMuiTheme({
    palette: {
        primary: { main: '#1565C0'},
        secondary: { main: '#11cb5f' }, 
    },
});

export const PrimaryButton = (props) => {
    return (
        <ThemeProvider theme={mytheme}>
            <a href={props.buttonLink}>
                <Button
                    style={{ ...props.styles}}
                    onClick={props.handleClick}
                    variant='contained' color='primary' size='large'
                >
                    {props.buttonText}
                </Button>
            </a>
        </ThemeProvider>
    );
};

export const SecondaryButton = (props) => {
    return (
        <ThemeProvider theme={mytheme}>
            <Button
                style={{...props.styles }}
                value={props.value || ''}
                onClick={props.handleClick}
                variant='outlined' color='secondary' size='large'
            >
                {props.buttonText}
            </Button>
        </ThemeProvider>
    )
}