optimize the following react component: const CustomerProfile = () => {
  const { getEditProfileUrl } = useApi();
  const { isPending, isError, data } = useCustomerInfoMain();
  const {
    isPending: isHassadPending,
    isError: isHassadError,
    data: hassadData,
  } = useHassadPoints();

  const info = data?.CustomerInfoMain || {};
  const hassadPoints = hassadData?.PointsBalance || "";

  const handleEditClick = (url) => {
    window.location.assign(url);
  };

  const profileDetails = [
    {
      icon: <MobileIcon />,
      title: info?.PhoneNumber,
      value: info?.PhoneNumber,
    },
    {
      icon: <CisIcon />,
      title: `${i18n.CIS}: ${info?.CISNumber}`,
      value: info?.CISNumber,
    },
    {
      icon: <RssFeedIcon />,
      title: `${i18n.DIGITALLY_ENROLLED} ${info?.DigitallyEnrolledFlag}`,
      value: info?.DigitallyEnrolledFlag,
    },
    {
      icon: <EmailIcon />,
      title: info?.Email,
      value: info?.Email,
    },
    {
      icon: <FingerprintIcon />,
      title: `${i18n.DV_FLAG} ${info?.DigitalVoucherFlag}`,
      value: info?.DigitalVoucherFlag,
    },
    {
      icon: <UserNumberIcon />,
      title: `${i18n.USER_NUMBER}: ${info?.UserNumber}`,
      value: info?.UserNumber,
    },
    {
      icon: <PersonIcon />,
      title: info?.Age + ` ${i18n.YEARS_OLD}`,
      value: info?.Age,
    },
    {
      icon: <RmCodeIcon />,
      title: `${i18n.RM_CODE}: ${info?.RMCode}`,
      value: info?.RMCode,
    },
    {
      field: "Hassad",
      icon: <HassadPointsIcon />,
      title: `${i18n.HASSAD_POINTS}: ${hassadPoints}`,
      value: hassadPoints,
    },
  ];

  return (
    <ColumnContainer>
      <RowContainer>
        <Box sx={{ display: "flex", gap: "1rem", flex: 1 }}>
          <ProfileIcon />
          <InfoContainer>
            <CustomerName>
              {isPending || isError ? (
                <Skeleton animation={isError ? false : "pulse"} />
              ) : (
                info?.FullName
              )}
            </CustomerName>
            <CustomerTitle>
              {isPending || isError ? (
                <Skeleton animation={isError ? false : "pulse"} />
              ) : (
                `${info?.["CustomerSegment "] || "-"} | SAMA Class: ${
                  info?.SAMAClass
                }`
              )}
            </CustomerTitle>
          </InfoContainer>
        </Box>
        <EditButton
          onClick={() =>
            handleEditClick(getEditProfileUrl(info?.Contact_RowId || ""))
          }
        />
      </RowContainer>

      <DetailsContainer>
        {profileDetails.map(({ icon, title, value, field }, index) => {
          const isEmpty = value === "" || value === null ? true : false;
          return (
            <DetailsItemContainer
              key={index}
              sx={isEmpty ? { ...greyedOutStyle } : {}}
            >
              {icon}
              {field === "Hassad" ? (
                isHassadPending || isHassadError ? (
                  <Skeleton
                    width={"75%"}
                    animation={isError ? false : "pulse"}
                  />
                ) : (
                  <Typography
                    sx={{
                      color: isEmpty ? "grey" : "#39217F",
                      width: "75%",
                      fontFamily: "Inter",
                      fontSize: "1rem",
                      fontStyle: "normal",
                      fontWeight: 400,
                      lineHeight: "normal",
                    }}
                  >
                    {title && value ? title : `${title} -`}
                  </Typography>
                )
              ) : isPending || isError ? (
                <Skeleton width={"75%"} animation={isError ? false : "pulse"} />
              ) : (
                <Typography
                  sx={{
                    color: isEmpty ? "grey" : "#39217F",
                    width: "75%",
                    fontFamily: "Inter",
                    fontSize: "1rem",
                    fontStyle: "normal",
                    fontWeight: 400,
                    lineHeight: "normal",
                  }}
                >
                  {title && value ? title : `${title} -`}
                </Typography>
              )}
            </DetailsItemContainer>
          );
        })}
      </DetailsContainer>
    </ColumnContainer>
  );
};

export default CustomerProfile;