<TabContext value={value}>
        <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
          <TabList onChange={handleChange} aria-label="New user Tab panel">
            <Tab tabIndex={0} label={t("General")} value="1" />
            {showMenuItem && <Tab tabIndex={0} label={t("Meta-Field")} value="2" />}
            <Tab tabIndex={0} label={t("Coach")} value="3" />
            {(!packages?.status || packages?.status !== 401) && <Tab tabIndex={0} label={t("Permissions")} value="4" />}
            {metaData && <Tab tabIndex={0} label={t("Labels")} value="5" />}
          </TabList>
        </Box>

        <Formik
          // enableReinitialize
          validationSchema={schema}
          // onChange={handleFormChange}
          initialValues={{
            username: "",
            team: parseInt(getCookieItem("account_id")),
            email: "",
            firstName: "",
            lastName: "",
            secondary_email: "",
            defaultEmail: 1,
            language_id: "1",
            user_metafields: "",
            timezone: "30",
            password: "",
            role: "",
            readerSupport: false,
            cross_team_ids: [],
            primary_coach: "",
            other_coaches: [],
            enable_send_credential_mail: false,
            metafields: Object?.entries(metaData).reduce((accumulator, [fieldName, fieldData]) => {
              return {
                ...accumulator,
                [fieldName]: "", // Use the value from Formik's values
              };
            }, {}),
          }}
          onSubmit={async (values) => {
            const data = {
              username: values.firstName + " " + values.lastName,
              email: values.email,
              firstName: values.firstName,
              lastName: values.lastName,
              secondary_email: values.secondary_email,
              defaultEmail: tempDefaultEmail,
              account_id: values.team,
              language_id: values.language_id || "1",
              timezone: values.timezone,
              user_metafields: values.user_metafields,
              password: values.password,
              primary_coach: selectedPrimaryCoachUserId,
              other_coaches: selectedCoachUserIds,
              readerSupport: values.readerSupport,
              role: selectedRole.value,
              cross_team_ids: updatedTeamIds,
              enable_send_credential_mail: values.enable_send_credential_mail,
              metafields: Object?.entries(metaData).reduce((accumulator, [fieldName, fieldData]) => {
                const fieldValue = values?.[fieldName];
                // console.log("fieldValue", fieldValue);
                if (fieldValue) {
                  return {
                    ...accumulator,
                    [fieldName]: fieldValue, // Use the value from Formik's values
                  };
                } else {
                  return { ...accumulator };
                }
              }, {}),
            };
            if (!data?.role) {
              showValidationError("Package Group");
              return false;
            }

            if (data && isValidated(data)) {
              setDisabledState(true);
              try {
                const result = await mutate(data);
                if (result?.data?.status_code === 200) {
                  handleClose();
                  refetch();
                  dispatch(
                    showSnackbar({
                      message: t("created"),
                      severity: "success",
                      duration: 3000,
                    })
                  );
                } else {
                  dispatch(
                    showSnackbar({
                      message: result?.error?.data?.detail,
                      severity: "error",
                      duration: 3000,
                    })
                  );
                }
              } catch (err) {
                dispatch(
                  showSnackbar({
                    message: t("something-went-wrong"),
                    severity: "error",
                    duration: 3000,
                  })
                );
                let getData = getAuditdata("CreateNewUser", "/dashboard/manage/Users", err);
                auditLog(getData);
              } finally {
                // handleClose();
                setDisabledState(false);
              }
            }
            //   //navigate(-1);
          }}
          validateOnChange={false}
          validateOnBlur={false}
          // validator={() => ({})}
        >
          {({
            values,
            handleChange,
            handleSubmit,
            validateField,
            setFieldValue,
            touched,
            isValid,
            errors,
            setValues,
          }) => (
            <Form
              onSubmit={handleSubmit}
              className="labelClass"
              // onChange={handleFormChange}
            >
              <TabPanel
                sx={{
                  color: errors.generalField && touched.generalField ? "red" : "inherit",
                }}
                value="1"
                className="scrollable-content"
                handleChange={handleChange}
              >
                {visibilityAccess === true ? (
                  <div className="mb20">
                    {/* <label htmlFor="team" className="labelClass ">
                    {t("team")}
                  </label>{" "} */}
                    <p className=" marginBottom0">{t("team")}</p>
                    <Select
                      className="input-fullwidth labelClass selectbox selectHeight"
                      name="team"
                      id="team"
                      value={values.team}
                      onChange={(...props) => {
                        const accountId = props[1]?.props?.value;
                        handleChange(...props);
                        setMetaDataParams(`account_id=${accountId}`);
                      }}
                      MenuProps={{ PaperProps: { sx: { maxHeight: 400 } } }}
                      inputProps={{
                        "aria-label": t("team"),
                      }}
                    >
                      {getTeamsData?.map((header) => (
                        <MenuItem value={header?.account_id} key={header?.account_id} className="fontStyle">
                          {header?.account_name}
                        </MenuItem>
                      ))}
                    </Select>
                  </div>
                ) : (
                  ""
                )}
                <div className="row">
                  <div className="col-sm-12 col-md-6 mb20">
                    <FormField
                      label={t("first-name")}
                      type="text"
                      name="firstName"
                      value={values.firstName}
                      labelClass={"fontSize20"}
                      inputProps={{
                        "aria-label": t("first-name"),
                      }}
                      isRequired
                      onBlur={() => validateField("firstName")}
                    />
                  </div>
                  <div className="col-sm-12 col-md-6 paddingBottom20">
                    <FormField
                      label={t("last-name")}
                      type="text"
                      name="lastName"
                      value={values.lastName}
                      inputProps={{
                        "aria-label": t("last-name"),
                      }}
                      isRequired
                      onBlur={() => validateField("lastName")}
                    />
                  </div>
                </div>
                <div className="row">
                  <div className="col-sm-12 col-md-6 mb20">
                    <FormField
                      label={t("user-id")}
                      type="email"
                      name="email"
                      value={values.email}
                      inputProps={{
                        "aria-label": t("user-id"),
                      }}
                      isRequired
                      showHelpIcon
                      helpText={t("user-id-text")}
                      onBlur={() => {
                        validateField("email");
                        setEmail(values.email);
                        isEmailBlurredRef.current = true;
                      }}
                      ref={emailInputRef}
                    />

                    <div>
                      <input
                        type="radio"
                        className="marginRight5"
                        name="defaultEmail"
                        defaultChecked="checked"
                        value={1}
                        aria-label={t("user-id-subtitle")}
                        checked={
                          tempDefaultEmail === 1 ||
                          values.secondary_email === "" ||
                          !values.secondary_email?.match(/^\S+@\S+\.\S+$/)
                        }
                        onChange={(e) => {
                          handleDefaultChange(parseInt(e.target.value));
                        }}
                      />
                      {t("user-id-subtitle")}
                    </div>
                  </div>

                  <div className="col-sm-12 col-md-6 paddingBottom20">
                    <FormField
                      label={t("secondary-email")}
                      type="email"
                      name="secondary_email"
                      inputProps={{
                        "aria-label": t("secondary-email"),
                      }}
                      value={values.secondary_email}
                      showHelpIcon
                      helpText={t("secondary-email-text")}
                      onBlur={() => {
                        validateField("secondary_email");
                        if (
                          !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.secondary_email) &&
                          values.secondary_email !== ""
                        ) {
                          dispatch(
                            showSnackbar({
                              message: t("Secondary_email is not correct"),
                              severity: "error",
                              duration: 3000,
                            })
                          );
                        }
                      }}
                      onChange={(e) => {
                        const secondary_email = e.target.value;
                        const isDefaultEmail =
                          tempDefaultEmail === 1 || secondary_email === "" || !secondary_email.match(/^\S+@\S+\.\S+$/);
                        setValues({
                          ...values,
                          defaultEmail: isDefaultEmail ? 1 : 2,
                          secondary_email: secondary_email,
                        });
                        handleDefaultChange(isDefaultEmail ? 1 : 2);
                      }}
                    />
                    <div>
                      <input
                        type="radio"
                        className="marginRight5"
                        name="secondary_emaill"
                        aria-label={t("secondary-email-title")}
                        value={2}
                        checked={tempDefaultEmail === 2 && values.secondary_email?.match(/^\S+@\S+\.\S+$/)}
                        onChange={(e) => {
                          values.secondary_email?.match(/^\S+@\S+\.\S+$/) &&
                            handleDefaultChange(parseInt(e.target.value));
                        }}
                      />
                      {t("secondary-email-title")}
                    </div>
                  </div>
                </div>
                {showLanguageItem && (
                  <div className="mb20">
                    <label className="labelClass ">{t("language")}</label>{" "}
                    <Select
                      className="input-fullwidth selectbox labelClass selectHeight"
                      name="language_id"
                      id="User_language"
                      inputProps={{
                        "aria-label": t("language"),
                      }}
                      value={values.language_id}
                      onChange={handleChange}
                      MenuProps={{ PaperProps: { sx: { maxHeight: 400 } } }}
                    >
                      {multiLang &&
                        multiLang?.map(({ id, language }) => (
                          <MenuItem value={id} key={id} className="fontStyle">
                            {language}
                          </MenuItem>
                        ))}
                    </Select>
                  </div>
                )}
                <div>
                  {/* <label htmlFor="User_timezone" className="labelClass ">
                    {t("timezone")}
                  </label>{" "} */}
                  <p className=" marginBottom0">{t("timezone")}</p>
                  <Select
                    className="input-fullwidth labelClass selectbox selectHeight"
                    name="timezone"
                    id="User_timezone"
                    value={values.timezone}
                    onChange={handleChange}
                    MenuProps={{ PaperProps: { sx: { maxHeight: 400 } } }}
                    inputProps={{
                      "aria-label": t("timezone"),
                    }}
                  >
                    {timezones?.map(({ timezone, timezone_id }) => (
                      <MenuItem value={timezone_id} key={timezone_id} className="fontStyle">
                        {timezone}
                      </MenuItem>
                    ))}
                  </Select>
                </div>
                {userMetafields && (
                  <div className="mb10 marginTop10">
                    <FormField
                      label={userMetafields}
                      type="text"
                      name="user_metafields"
                      value={values.user_metafields}
                      labelClass={"fontSize20"}
                      isRequired
                      inputProps={{
                        "aria-label": userMetafields,
                      }}
                      onBlur={() => validateField("user_metafields")}
                    />
                  </div>
                )}
                {/* {sendCredentialMailEnabled === "1" 
                || sendCredentialMailEnabled === true && (
                  <div className="mb10 marginTop10">
                    <FormControlLabel
                      control={
                        <Checkbox
                          name={"enable_send_credential_mail"}
                          checked={values.enable_send_credential_mail}
                          onChange={(e) => {
                            setFieldValue(
                              "enable_send_credential_mail", // field name
                              e.target.checked // new value
                            );
                          }}
                          tabIndex={0}
                          onKeyDown={(e) => {
                            if (e.key === "Enter") {
                              e.preventDefault();
                              setFieldValue(
                                "enable_send_credential_mail",
                                !values.enable_send_credential_mail
                              );
                            }
                          }}
                        />
                      }
                      label={t("enable-Send-credential")}
                    />
                  </div>
                )} */}
                {/* {sendCredentialMailEnabled === "1" || sendCredentialMailEnabled === true ? ( */}
                <div className="mb10 marginTop10">
                  <span className="flex" style={{ alignItems: "center" }}>
                    <FormControlLabel
                      control={
                        <Checkbox
                          name={"enable_send_credential_mail"}
                          checked={values.enable_send_credential_mail}
                          disabled={!sendCredentialMailEnabled}
                          onChange={(e) => {
                            setFieldValue(
                              "enable_send_credential_mail", // field name
                              e.target.checked // new value
                            );
                          }}
                          tabIndex={0}
                          onKeyDown={(e) => {
                            if (e.key === "Enter") {
                              e.preventDefault();
                              setFieldValue("enable_send_credential_mail", !values.enable_send_credential_mail);
                            }
                          }}
                        />
                      }
                      label={t("enable-Send-credential")}
                    />
                    {!sendCredentialMailEnabled && (
                      <CustomizedTooltips
                        title="Sending credentials mail is currently disabled for your organization. Please contact your Zenarate administrator if you wish to activate it"
                        placement="right-start"
                      >
                        <FontAwesomeIcon className="infoIcon" icon={faCircleInfo} />
                      </CustomizedTooltips>
                    )}
                  </span>
                </div>
                {/* ) : null} */}
                <div className="mb10 marginTop10">
                  <FormControlLabel
                    control={
                      <Checkbox
                        name={"enable_screen_reader_support"}
                        checked={values.readerSupport}
                        onChange={(e) => {
                          setFieldValue(
                            "readerSupport", // field name
                            e.target.checked // new value
                          );
                        }}
                        tabIndex={0}
                        onKeyDown={(e) => {
                          if (e.key === "Enter") {
                            e.preventDefault();
                            setFieldValue("readerSupport", !values.readerSupport);
                          }
                        }}
                      />
                    }
                    label={t("enable-screen-reader-support")}
                  />
                </div>
              </TabPanel>

              {showMenuItem && (
                <TabPanel value="2" className="scrollable-content" handleChange={handleChange}>
                  <FormField
                    label={t("password")}
                    type={showPassword ? "text" : "password"}
                    name="password"
                    value={values.password}
                    isRequired
                    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>
                    }
                  />
                  {showpwdGuidelines && (
                    <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>
                  )}
                </TabPanel>
              )}

              <TabPanel value="3" className="scrollable-content">
                <div className="mb20" id="multiSelectHeight">
                  <label htmlFor="primary_coach" className="labelClass ">
                    {t("primary-coach")}
                  </label>{" "}
                  <Autocomplete
                    className="input-fullwidth selectbox labelClass"
                    name="primary_coach"
                    id="primary_coach"
                    options={userListCoach && userListCoach.length > 0 ? userListCoach : usersList}
                    getOptionLabel={(coach) => `${coach.username} (${coach.email})`}
                    value={selectedPrimaryCoach}
                    onChange={handlePrimaryCoach}
                    onInputChange={handleInputChange} // Handle input change
                    loading={isFetching}
                    // onInputChange={(event, newInputValue) => {
                    //   setInputValue(newInputValue); // Pass the newInputValue directly
                    //   // handleInputChange();
                    // }}
                    renderInput={(params) => (
                      <TextField {...params} id="primary_coach" placeholder={t("name-email")} variant="outlined" />
                    )}
                    PaperProps={{ sx: { maxHeight: 400 } }}
                  />
                </div>
                <div className="mb20 " id="multiSelectHeight">
                  <label className="labelClass" htmlFor="assigned-coaches">
                    {t("other-coaches")}
                  </label>
                  <Autocomplete
                    className="input-fullwidth selectbox labelClass"
                    multiple
                    id="assigned-coaches"
                    disableCloseOnSelect
                    options={userListCoach && userListCoach.length > 0 ? userListCoach : usersList}
                    getOptionLabel={(coach) => `${coach.username} (${coach.email})`}
                    value={selectedCoaches}
                    onChange={handleSelectCoaches}
                    onInputChange={handleInputChange}
                    loading={isFetching}
                    // onInputChange={(e) => {
                    //   // handleInputChange();
                    //   setInputValue(e.target.value);
                    // }}
                    renderTags={(value, getTagProps) =>
                      value.map((coach, index) => (
                        <Chip
                          key={coach.email}
                          label={`${coach.username} (${coach.email})`}
                          {...getTagProps({ index })}
                        />
                      ))
                    }
                    renderInput={(params) => (
                      <TextField {...params} id="assigned-coaches" placeholder={t("name-email")} variant="outlined" />
                    )}
                  />
                </div>
              </TabPanel>

              <TabPanel value="4" className="scrollable-content">
                <div className="mb20" id="multiSelectHeight">
                  <label htmlFor="role" className="labelClass ">
                    {t("select-role")}
                    <span className="danger">*</span>
                  </label>
                  <Autocomplete
                    className="input-fullwidth selectbox labelClass mb20"
                    name="role"
                    id="role"
                    // options={packages?.roles?.role}
                    options={packagesArray}
                    // getOptionLabel={(dataItem) => dataItem}
                    getOptionLabel={(dataItem) => dataItem.label}
                    value={selectedRole}
                    onChange={handleRole}
                    renderInput={(params) => (
                      <TextField {...params} required id="role" placeholder={t("name-email")} variant="outlined" />
                    )}
                    PaperProps={{ sx: { maxHeight: 400 } }}
                  />
                  {/* {(!getCrossTeamAccess?.status || getCrossTeamAccess?.status !== 401) && (
                    <div>
                      <label>{t("cross-team")}</label>
                      <ul>
                        {getCrossTeamAccess?.length &&
                          getCrossTeamAccess?.map((teamItem, index) => (
                            <li key={teamItem?.brand_id} className="marginBottom15">
                              <label className="labelMargin">
                                <Checkbox
                                  type="checkbox"
                                  checked={teamItem?.account_access?.every((accountAccess) =>
                                    selectedTeamIds.some((selectedTeam) =>
                                      selectedTeam.account_id?.includes(accountAccess.account_id)
                                    )
                                  )}
                                  onChange={() => toggleTeam(teamItem?.brand_id)}
                                  classes={{
                                    root: "custom-checkbox-root",
                                  }}
                                />
                                {teamItem?.brand_name}
                                <span onClick={(e) => handleTeamClick(e, index)}>
                                  {openTeamStates[index] ? <ExpandLess /> : <ExpandMore />}
                                </span>
                              </label>
                              <Collapse in={openTeamStates[index]} timeout="auto" unmountOnExit>
                                <ul>
                                  {teamItem?.account_access?.map((accountAccess) => (
                                    <li key={accountAccess.account_id} className="packageCase flex">
                                      <label>
                                        <Checkbox
                                          type="checkbox"
                                          checked={selectedTeamIds.some((selectedTeam) =>
                                            selectedTeam.account_id?.includes(accountAccess.account_id)
                                          )}
                                          onChange={() => {
                                            toggleTeamAccount(
                                              accountAccess.account_id,
                                              teamItem.brand_id,
                                              Object.keys(teamItem?.account_access)?.length
                                            );
                                          }}
                                          onKeyDown={(e) => {
                                            if (e.key === "Enter") {
                                              toggleTeamAccount(
                                                accountAccess.account_id,
                                                teamItem.brand_id,
                                                Object.keys(teamItem?.account_access)?.length
                                              );
                                            }
                                          }}
                                          classes={{
                                            root: "custom-checkbox-root",
                                          }}
                                        />
                                        {accountAccess.account_name}
                                      </label>
                                    </li>
                                  ))}
                                </ul>
                              </Collapse>
                            </li>
                          ))}
                      </ul>
                    </div>
                  )} */}
                </div>
              </TabPanel>

              <TabPanel value="5" className="scrollable-content">
                <div id="multiSelectHeight">
                  {Object.keys(metaData).length !== 0 ? (
                    Object?.entries(metaData)?.map(([fieldName, fieldData]) => {
                      const { type, label, values: selectValues } = fieldData;
                      const selectValuesArray = Object?.values(selectValues);

                      switch (type) {
                        case "STRING":
                          return (
                            <div className="mb20" key={fieldName}>
                              <label className="labelClass ">
                                {t(label)}{" "}
                                {fieldData?.rule?.is_required > 0 && <span className="colorRed required">*</span>}
                              </label>
                              <TextField
                                key={fieldName}
                                name={fieldName} // Use the correct field name path
                                value={values[fieldName]}
                                inputProps={{
                                  "aria-label": t(label),
                                }}
                                onChange={(e) => {
                                  setFieldValue(`metafields.${fieldName}`, e.target.value);
                                }}
                                onBlur={(e) => {
                                  isValidated({
                                    metafields: {
                                      [fieldName]: e.target.value,
                                    },
                                  });
                                }}
                                fullWidth
                                variant="outlined"
                              />
                            </div>
                          );
                        case "BOOLEAN":
                          return (
                            <div className="mb20" key={fieldName}>
                              <FormControlLabel
                                control={
                                  <Checkbox
                                    name={fieldName}
                                    value={values[fieldName]}
                                    checked={values[fieldName]}
                                    onChange={(e) => {
                                      const newValue = e.target.checked;
                                      handleChange(e);
                                      setFieldValue(fieldName, newValue === "on" ? true : newValue);
                                    }}
                                  />
                                }
                                label={label}
                              />
                            </div>
                          );
                        case "LIST":
                          return (
                            <div className="mb20" key={fieldName}>
                              <label className="labelClass ">
                                {t(label)}
                                {fieldData?.rule?.is_required > 0 && <span className="colorRed required">*</span>}
                              </label>
                              <Select
                                name={fieldName}
                                value={values[fieldName]}
                                onChange={handleChange}
                                inputProps={{
                                  "aria-label": t(label),
                                }}
                                onBlur={(e) => {
                                  isValidated({
                                    metafields: {
                                      [fieldName]: e.target.value,
                                    },
                                  });
                                }}
                                fullWidth
                                variant="outlined"
                                MenuProps={{ PaperProps: { sx: { maxHeight: 400, maxWidth: 500 } } }}
                              >
                                {/* {!fieldData?.rule?.is_required && (
                                    <MenuItem value="">{"No options"}</MenuItem>
                                  )} */}
                                {/* {selectValues.map((option) => (
                                    <MenuItem key={option} value={option}>
                                      {option}
                                    </MenuItem>
                                  ))} */}
                                {selectValuesArray.map((value, index) => (
                                  <MenuItem key={index} value={value}>
                                    {value}
                                  </MenuItem>
                                ))}
                              </Select>
                            </div>
                          );

                        default:
                          return null;
                      }
                    })
                  ) : (
                    <Typography sx={{ color: "#A80000" }}>{t("no-label")}</Typography>
                  )}
                </div>
                {/* <div>
                  <label>{t("all-labels")}</label>
                  <TextareaAutosize
                    readOnly
                    className="tagsClass"
                    defaultValue={getTags?.[user_id]
                      ?.map((key) => `${key?.tag_name}: ${key?.tag_collection_name}`)
                      .join("\n")}
                  />
                </div> */}
              </TabPanel>

              <hr />
              <div className="d-flex justify-content-end marginBottom10 marginRight10 modal-footer">
                <Button variant="light" className="marginLeft5 cancelButton box-shadow-none " onClick={handleClose}>
                  {t("cancel")}
                </Button>
                <Button
                  variant="contained"
                  className=" buttonColor marginLeft5 box-shadow-none"
                  type="submit"
                  disabled={
                    (showMenuItem && !guidelinesValidated) || emailData?.users_list?.length !== 0 || disabledState
                  }
                >
                  {t("submit")}
                </Button>
              </div>
            </Form>
          )}
        </Formik>
      </TabContext>
i want if my error occur in any tab then the tab text color change to red in tablist