Icon in table header is getting crushed on iphone only

Question

Using Amplify Ui inside a React JS app, I create a table with icons inside the header cell to give the user the ability to sort by a row.

On desktop, it looks like this:

However on iPhone the icons get crushed or even disappears.

How is the header shrinking and is it because of the flex box's minimum width?

import {
  Flex,
  Image,
  ScrollView,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
  SearchField,
} from "@aws-amplify/ui-react";
import uparrow from "../assets/upArrow.svg";
import downarrow from "../assets/downArrow.svg";
import sortIcon from "../assets/sortIcon.svg";
...
const ImageSize = {
  width: "1rem",
  height: "1rem",
};
...
const src =
        sortColumn === column
          ? sortDirection === "asc"
            ? uparrow
            : downarrow
          : sortIcon;

      const iconClick: () => void =
        sortColumn === column
          ? () => handleSort(column, sortDirection === "asc" ? "desc" : "asc")
          : () => handleSort(column, "asc");
      return (
        <TableCell key={`${cell}${column}`} as={"th"}>
          <Flex gap={"relative.small"} alignItems="center">
            {cell.element || cell.value}
            {showSortIcon && (
              <Image
                height={ImageSize.height}
                width={ImageSize.width}
                src={src}
                alt="sort icon"
                onClick={iconClick}
                style={{ cursor: "pointer" }}
              />
            )}
          </Flex>
        </TableCell>

Edit:

Tried adding minWidth = “1rem” to the icon, but I didn’t work. Picture below.

Answer 1

Following the advice from Leo (user:8274308), wrapping the icon in a <div> and then applying a minWidth to the <div> did the trick. Applying minWidth to the Icon element did not work.