{showMenuItem && (
                      <div className="mb20">
                        <FormField
                          label={t("password")}
                          type={showPassword ? "text" : "password"}
                          name="password"
                          value={values.password}
                          isRequiredSign
                          inputClass="newPassword"
                          inputProps={{
                            "aria-label": t("password"),
                          }}
                          onBlur={() => {
                            validateField("password");
                            setShowpwdGuidelines(false);
                          }}
                          onFocus={() => setShowpwdGuidelines(true)}
                          onChange={(e) => {
                            const { value } = e.target; // Destructure the value from the event target
                            const newValue = value.replace(/\s/g, ""); // Remove spaces from the value
                            setFieldValue("password", newValue); // Update the field value
                            handleChangePassword(newValue);
                          }}
                          endAdornment={
                            <InputAdornment position="end" className="input-addorment">
                              <Button
                                aria-label={showPassword ? "HidePassword" : "ShowPassword"}
                                onClick={toggleShowPassword}
                                className="show-passsword"
                              >
                                {showPassword ? (
                                  <FontAwesomeIcon icon={faEye} />
                                ) : (
                                  <FontAwesomeIcon icon={faEyeSlash} />
                                )}
                              </Button>
                              <Button
                                onClick={() => {
                                  if (!generatingPassword) {
                                    setGeneratingPassword(true);
                                  }
                                  const generatedpwd = generateRandomPassword(8);
                                  setFieldValue("password", generatedpwd);
                                  handleGeneratePwd(generatedpwd);
                                }}
                                className="generate-btn"
                              >
                                {t("generate")}
                              </Button>
                            </InputAdornment>
                          }
                        />

                        <Card className="card-overflow new-card">
                          <h5 className="guidelines font14">{t("password-must-meet-following-requirements")}</h5>
                          <div className={upperValidated ? "validated" : "not-valid"}>
                            {upperValidated ? (
                              <span className="tick">
                                <FontAwesomeIcon icon={faCheck} />
                              </span>
                            ) : (
                              <span className="cross">
                                <FontAwesomeIcon icon={faXmark} />
                              </span>
                            )}
                            {t("at-least")} <strong>{t("one-capital-letter")}</strong>
                          </div>
                          <div className={numValidated ? "validated" : "not-valid"}>
                            {numValidated ? (
                              <span className="tick">
                                <FontAwesomeIcon icon={faCheck} />
                              </span>
                            ) : (
                              <span className="cross">
                                <FontAwesomeIcon icon={faXmark} />
                              </span>
                            )}
                            {t("at-least")}
                            <strong>{t("one-number")}</strong>
                          </div>
                          <div className={specialValidated ? "validated" : "not-valid"}>
                            {specialValidated ? (
                              <span className="tick">
                                <FontAwesomeIcon icon={faCheck} />
                              </span>
                            ) : (
                              <span className="cross">
                                <FontAwesomeIcon icon={faXmark} />
                              </span>
                            )}
                            {t("at-least")}
                            <strong>{t("one-special-character")}</strong>
                          </div>
                          <div className={lengthValidated ? "validated" : "not-valid"}>
                            {lengthValidated ? (
                              <span className="tick">
                                <FontAwesomeIcon icon={faCheck} />
                              </span>
                            ) : (
                              <span className="cross">
                                <FontAwesomeIcon icon={faXmark} />
                              </span>
                            )}
                            {t("be-at-least")}
                            <strong>
                              {minLength} {t("characters")}
                            </strong>
                          </div>
                        </Card>
                      </div>
                    )}
In this My card is going tothe last modal but i want it to be just below the password