TextField populate from the browser with incorrect font size

Question

I have a simple page, user text field and password, with font size of 30 (for the question only for the user field).

For some reason, when the browser (chrome) populate the field it's render with wrong font size (till the text field become in focus):

As you can see in the picture: Left - auto fill, wrong size; Right - correct font size, after focusing the field.

The code (also in sandbox):

import * as React from "react";
import TextField from "@mui/material/TextField";

export default function ThemeVariables() {
  const [name, setName] = React.useState("");
  const [psw, setPsw] = React.useState("");

  return (
    <div>
      <h2>Name</h2>
      <TextField
        inputProps={{ style: { fontSize: 30 } }}
        InputLabelProps={{ style: { fontSize: 30 } }}
        onChange={(event) => setName(event.target.value)}
        value={name}
      />
      <h2>Psw</h2>
      <TextField
        type="password"
        value={psw}
        onChange={(event) => setPsw(event.target.value)}
      />
      <button onClick={() => console.log(name + " " + psw)}>Submit</button>
    </div>
  );
}

(you can keep the password via the key icon in your browser, right to the url address).

Any idea, how to populate in the right font size?

P.S. The small font size behavior even reproduce while textField in focus and the user hover on the saved passwords: