mui material responsiveFontSizes does not handle body2

Trying to create a responsive layout that changes font sizes based on screen size. I am using Material-ui and have found the following in the documentation: https://material-ui.com/customization/theming/#responsivefontsizes-theme-options-theme

It seems to work fine on my variant='h4' of the <Typography> component, but does nothing for the variant='body2'.

According to the documentation, you can pass in the following option:

variants (Array [optional]): Default to all. The typography variants to handle.

As, stated, the default is all, but I tried passing an object to manually select the variants. variants: ['h4', 'body2'] The result was the same, works on h4, not on body2.

here's some code

in my index.js:

theme = responsiveFontSizes(theme, { factor: 5, variants: ['h4', 'body2']});

ReactDOM.render(
    <React.StrictMode>
        <ThemeProvider theme={theme}>
            <CssBaseline />
            <App />
        </ThemeProvider>
    </React.StrictMode>,
    document.getElementById('root'),
);

from app.js

{/* title */}
<Grid item xs={11}>
  <Typography variant='h4' align='center' className={classes.title}>
    {'Valentin Harapu. WebDev.'}
  </Typography>
</Grid>
{/* card(s) */}
<Grid item xs={11} sm={6} md={4}>
  <Card variant='elevation' elevation={3}>
    <CardContent>
      <Typography variant='body2' component='p'>
        well meaning and kindly.
        <br />
        {'"a benevolent smile"'}
      </Typography>
    </CardContent>
    <CardActions>
      <Button size='small' variant='outlined'>
        Learn More
      </Button>
    </CardActions>
  </Card>
</Grid>

PS: i know the code looks messy, I'm new to material and still play around and figuring out how stuff works :) and if you read all the way to the bottom of this post I wish you an amazing day! thank you