Invalid React ловушка при модульном тестировании компонентов с использованием withStyles (material-ui)

Question

Я пытаюсь выполнить модульное тестирование компонента, который использует withStyles из material-ui. Я определяю стиль ниже.

import { makeStyles, Theme, createStyles } from "@material-ui/core";

const myStyle = (theme: Theme) => createStyles({
    root: {
        display: 'flex'
    },
    content: {
        flexGrow: 1,
        backgroundColor: theme.palette.background.default,
        padding: theme.spacing(3)
    },
    drawer: {
        width: 240
    }
});

export function useStyles() {
    return makeStyles(myStyle);
}

он используется компонентом MainPage следующим образом

export const MainPage = () => {
    const classes = useStyles();

    return (
        <ErrorBoundary>
            <DynamicFormWrapper
                baseUrl={'https://.......'}
                classes={classes()}
            />
        </ErrorBoundary>
    );
};

У меня есть компонент ниже по дереву, который опирается на этот стиль, который выглядит следующим образом

type FormProps = {
    names: string[];
} & WithStyles;

export class SideMenu extends React.Component<FormProps> {
    private names: string[];

    constructor(props) {
        super(props);

        this.names= props.names;
    }

    render() {
        //omitted
    }
}

Когда я пытаюсь протестировать этот компонент, мне нужно передать стиль в качестве опоры, и я пытаюсь сделать это следующим образом

import * as React from 'react';
import { configure, shallow } from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';
import { SideMenu } from '../src/components/SideMenu';
import { useStyles } from '../src/js/styles'

configure({ adapter: new Adapter() });

describe('SideMenu', () => {
    let wrapper;

    beforeEach(() => {
        const style = useStyles();
        wrapper = shallow(<SideMenu names={['test1', 'test2', 'test3']} classes={style()} />);
    });

    it('Should render', () => {
        expect(wrapper)
    });
});

при запуске тестов, это приведет к неверному Ошибка хука

 Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following yada yada

      16 |     beforeEach(() => {
      17 |         const style = useStyles();
    > 18 |         wrapper = shallow(<SideMenu names={['test1', 'test2', 'test3']} classes={style()} />);
         |                                                                                  ^ 
      19 |     });
      20 |
      21 |      it('Should render', () => {

Я могу это исправить, когда сталкиваюсь с ними с обычными компонентами, но не могу обойти это в модульном тесте, подобном этому. Есть идеи?