назначить useStyles const break

Question

Я пытаюсь переопределить настройки по умолчанию для значка MUI с помощью useStyles. Я все еще очень новичок - JS и MUI, и я подумал, что следующий код позволит мне установить нестандартный размер для иконки:

const useStyles = makeStyles((theme: AppTheme) =>
createStyles({
        svgSize: {
            width: 24,
            height: 24
        },
    },
));


const renderIcon = (type: ActivityType) => {
const classes = useStyles();
if (
    type === 'document_updated' ||
    type === 'study_team_updated' ||
    type === 'update_site_info' ||
    type === 'update_study_type'
)
{
    return (
        <UpdateIcon htmlColor={appTheme.colors.slate} className={classes.svgSize} />
    );
}
if (type === 'document_uploaded' || type === 'add_study') {
    return (
        <PostAddIcon htmlColor={appTheme.colors.slate} className={classes.svgSize}/>
    );
}
return <FileCopyIcon htmlColor={appTheme.colors.slate} className={classes.svgSize} />;
};

Но как только я добавлю const classes = useStyles(); , просмотр в браузере прерывается , Там нет ошибки при компиляции, хотя.

Любая помощь?