Close Button on Modal disappear in real iphone

Question

The Close Button still appear when I test responsive in Chrome but it disappear in real iphone.

When click into image, the image gallery will appear but in iphone, it just have previous button and next button, the close button is disappear.

Here're my code:

import React, { useState } from "react";
import {
  Box,
  HStack,
  IconButton,
  Image,
  Modal,
  ModalContent,
  ModalOverlay,
  Spacer,
  Text,
  VStack,
} from "@chakra-ui/react";
import ArrowLeftIcon16x8 from "../../icons/ArrowLeftIcon16x8";
import ArrowRightIcon16x8 from "../../icons/ArrowRightIcon16x8";
import { CloseIcon } from "@chakra-ui/icons";

const ImageGalleryModal = ({
  isOpen,
  onClose,
  currentImage,
  listingImages,
}) => {
  const [showCurrentImage, setShowCurrentImage] = useState(currentImage);
  return (
    <Modal
      blockScrollOnMount={true}
      isOpen={isOpen}
      onClose={onClose}
      isCentered
      size={"full"}
    >
      <ModalOverlay />
      <ModalContent minWidth={"100%"} height={"100vh"} position={"relative"}>
        <Image
          top={"0"}
          width={"full"}
          height={"100vh"}
          alt={"img_rent"}
          src={listingImages[showCurrentImage]?.url}
          objectFit={"cover"}
          position={"absolute"}
          zIndex={100}
        />
        <VStack w={"100vw"} h={"100vh"} alignItems={"flex-end"} spacing={0}>
          <Box
            top={{ base: "16px", lg: "24px" }}
            right={{ base: "16px", lg: "24px" }}
            borderRadius={"8px"}
            position={"absolute"}
            zIndex={1000}
          >
            <IconButton
              onClick={onClose}
              width={"32px"}
              height={"32px"}
              borderRadius={"8px"}
              bgColor={"rgba(255, 255, 255, 0.3)"}
              icon={<CloseIcon />}
              aria-label={"Close Image Gallery"}
            />
          </Box>
          <HStack
            position={"absolute"}
            zIndex={999}
            width={"full"}
            height={"full"}
          >
            <HStack
              paddingLeft={{ base: "16px", lg: "24px" }}
              height={"full"}
              alignItems={"center"}
            >
              <IconButton
                onClick={() =>
                  setShowCurrentImage(
                    showCurrentImage > 0
                      ? showCurrentImage - 1
                      : listingImages?.length - 1
                  )
                }
                width={"32px"}
                height={"32px"}
                borderRadius={"8px"}
                bgColor={"rgba(255, 255, 255, 0.3)"}
                icon={<ArrowLeftIcon16x8 />}
                aria-label={"previous image"}
              />
            </HStack>
            <Spacer />
            <HStack
              paddingBottom={{ base: "12px", lg: "16px" }}
              height={"full"}
              alignItems={"flex-end"}
            >
              <Text
                width={{ base: "56px", lg: "64px" }}
                height={{ base: "24px", lg: "34px" }}
                fontWeight={500}
                fontSize={{ base: "12px", lg: "16px" }}
                color={"black.500"}
                bgColor={"rgba(255, 255, 255, 0.3)"}
                borderRadius={"8px"}
                padding={{ base: "4px 18px", lg: "5px 18px" }}
              >
                {`${listingImages?.length > 0 ? showCurrentImage + 1 : 0}/${
                  listingImages?.length
                }`}
              </Text>
            </HStack>
            <Spacer />
            <HStack
              paddingRight={{ base: "16px", lg: "24px" }}
              height={"full"}
              alignItems={"center"}
            >
              <IconButton
                onClick={() =>
                  setShowCurrentImage(
                    showCurrentImage < listingImages?.length - 1
                      ? showCurrentImage + 1
                      : 0
                  )
                }
                width={"32px"}
                height={"32px"}
                borderRadius={"8px"}
                bgColor={"rgba(255, 255, 255, 0.3)"}
                icon={<ArrowRightIcon16x8 />}
                aria-label={"next image"}
              />
            </HStack>
          </HStack>
        </VStack>
      </ModalContent>
    </Modal>
  );
};

export default ImageGalleryModal;

I tried to make zIndex of close button to higher than another buttons but it not working.