"@mui/material": "^5.5.3"

Hi there, I'm trying to style my MUI form using values, imported from the SCSS variables. Everything seems to be working fine (I can see passed values in devtools) except for the colors actually never change.

Registration.tsx

import {AppDataContext} from './context/app-data-context';
import {createTheme, ThemeProvider} from '@mui/material/styles';

export const Registration = () => {
    const appData = useContext(AppDataContext);
    const myTheme = useMemo(() => {
        const colors = appData.brandedSCSS.default;
        return createTheme({
            palette: {
                primary: {
                    main: colors.primary // #fdab0a
                },
                secondary: {
                    main: colors.secondary // #ffffff
                }
            }
        })
    }, [appData])

    return (
        <ThemeProvider theme={myTheme}>
           // some code here
        </ThemeProvider>
    );

Somewhere going down the components tree:

import {Button, CircularProgress, Grid} from "@mui/material";

// some code here

return (

//some code there

    <Button
        color="primary"
        type="submit"
    >
)

Theme seems to be applied correctly

but the buttons is still blue

What am I doing wrong? Thanks.