On Page Load, the saved credentials are auto filled and they are overlaping with the placeholder of mui textfield component

On Page Load, the saved credentials are auto filled and they are overlaping with the placeholder of mui textfield component

How to solve this

I used useEffect for triggering click event on page render , but its not effecting the text field, and i tried autoFocus prop also , its not working too

<TextField
        id={id}
        fullWidth
        autoFocus={autofocus}
        name={name}
        style={customStyles}
        label={label}
        variant={variant}
        type={showPassword ? "text" : type}
        value={value}
        onChange={handleOnChange}
        onBlur={onBlur}
        error={error}
        helperText={helperText}
        placeholder={placeholder} 
        onKeyDown={handleKeyDown}
        slotProps={{
          input: {
            autoComplete: autocomplete,
            ...(type === "password" && {
              endAdornment: (
                <InputAdornment position="end">
                  <IconButton
                    aria-label={
                      showPassword
                        ? "hide the password"
                        : "display the password"
                    }
                    onClick={handleClickShowPassword}
                    onMouseDown={handleMouseDownPassword}
                    onMouseUp={handleMouseUpPassword}
                    edge="end"
                  >
                    {showPassword ? (
                      <VisibilityOff titleAccess={t(wordings.hidePassword)} />
                    ) : (
                      <Visibility titleAccess={t(wordings.showPassword)} />
                    )}
                  </IconButton>
                </InputAdornment>
              ),
            }),
          },
        }}

Read the MUI documentation

To workaround the issue, you can force the "shrink" state of the label.

<TextField slotProps={{ inputLabel: { shrink: true } }} />

or

<InputLabel shrink>Count</InputLabel>