TextField label gets in the way with initial Chrome autofill value

[SoulDancer27]

It might be, that I just don't know how to do it properly, this issue appeared after i moved to mui-v5. If the value for the TextField component is taken from browser autofill value the label initially lays right on top of it covering the text. After i click on the form it moves to the top where it should be.

How should I address this issue?
The code looks like this:

  <Field
                  component={TextField}
                  name="name"
                  variant="outlined"
                  label={
                    <Typography variant="body1" color="textPrimary">
                      Логин
                    </Typography>
                  }
                  fullWidth
                  className={classes.textfield}
                />

Any help would be appreciated