'Responsive font size for high resolutions not working in MUI 5

I am using Material UI v5 in my React app.

And using responsiveFontSizes to generate responsive typography settings based on the options received.

So the responsiveFontSizes works fine for all device sizes, but only for the default Material UI breakpoints.

The font sizes on a device which has a high or ultra high resolution like 2560 * 1440, 2340 * 1080 or even 3200 * 1440 don't work at all.

They look very small.

If I look into the inspect mode, then I can see a Typography with h3 has 2.9991rem as maximum.

All of the Typography components I used in Container.

<Container maxWidth="md">
  <Typography variant="h1">h1 test</Typography>
  ...
</Container>

How can I make the responsiveFontSizes work on a high resolution device as well?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Solution	Source