How to pass dynamic values into Material UI's createTheme()

Question

I'm looking to pass data into Material UI's default theme, but I'm struggling to make it work.

Here's the theme definition on index.js:

let theme = createTheme({
  primary: {
    main: '#212121'
    }
})

And this is what I want to pass:

  primary: {
    main: data.website.live.theme.colors.primary
    }

This is what I tried:

let theme = createTheme(data, {
  primary: {
    main: data.website.live.theme.colors.primary
    }
})

But, this approach didn't work as createTheme only allows the following arguments:

• Options (object): Takes an incomplete theme object and adds the missing parts.
• ...args (object[]): Deep merge the arguments with the about to be returned theme.

Official documentation: https://mui.com/material-ui/customization/theming/#theme-provider