makeStyles: Cannot read property 'primary' of undefined

I using MUI next version and cannot make style.

• @material-ui/core: ^5.0.0-beta.5
• @mui/styles: ^5.0.0-rc.0
• @emotion/react: ^11.4.1
• @emotion/styled: ^11.3.0
• react: ^17.0.2
• typescript: ^4.1.2
• node: v14.17.1
• npm: 7.18.1

And my code make styles

src/assets/css/variables.tsx

import { Theme } from "@material-ui/core";
import { makeStyles } from "@mui/styles";

const variableStyle = makeStyles((theme: Theme) => ({

  '@global': {

    ':root': {
      '--primary': theme.palette.primary.main,
      '--secondary': theme.palette.secondary.main,
      '--danger': theme.palette.error.main,
      '--success': theme.palette.success.main,
      '--warning': theme.palette.warning.main,
      '--gray': '#eeeff5',
      '--yellow': '#f8ad08',
      '--pink': '#5b6bff',
      '--black': '#33375d',
      '--fontsize': '14px',
      '--sidebar-width': '288px',
      '--sidebar-compact-width': '70px'
    }

  }

}));

export default variableStyle;

src/views/components/includes/GlobalCss.tsx

import React from 'react';
import variableStyle from 'assets/css/variables';

const GlobalCss: React.FC = () => {

  variableStyle();

  return null;

}

export default React.memo(GlobalCss);

Error occured when I start project:

TypeError: Cannot read property 'primary' of undefined
/src/assets/css/variables.tsx:9

    6 | '@global': {
    7 | 
    8 |    ':root': {
>   9 |      '--primary': theme.palette.primary.main,
   10 | ^    '--secondary': theme.palette.secondary.main,
   11 |      '--danger': theme.palette.error.main,
   12 |      '--success': theme.palette.success.main,

What should I do to be able to use palette property of the theme variable inside makeStyles function