Issue with font rendering on Browser

I am building a React App using Material UI library. I need to change the default font of the theme from Roboto to Overpass. To do that I imported the fonts using their library

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

Then I have defined it in the createMuiTheme function:

  export const theme = createMuiTheme({
    typography: {
      fontFamily: [
        '-apple-system',
        'BlinkMacSystemFont',
        '"Segoe UI"',
        'Overpass',
        '"Helvetica Neue"',
        'Arial',
        'sans-serif',
        '"Apple Color Emoji"',
        '"Segoe UI Emoji"',
        '"Segoe UI Symbol"',
      ].join(','),
      ... 
    }
  })

When I see the result on the browser (tested on Chrome, Brave, Firefox), all the text is rendered with a "padding" at the bottom. I said "padding" cause it's not an actual padding, it's like if the text is incorrectly defined. I tried also to change the line-height property, but it's not the issue.

This issue is clearly visible when you try to align element in the center (inherit is the default value, but it inherit a center value)

The image above is the default Button component of material UI without any edits on my side: as you can see, the text is clearly aligned higher.

Same issue happens if I use another font (Like Benne)

Anyone has an idea on how this can be solved?

Edit: If I use Poppins as font, this issue is not present

Edit 2: See a sample https://codesandbox.io/s/unruffled-vaughan-zvwq9

In the sample, I have placed a button, as well as a component aligned in the center. In both situation you will see the above mentioned error