Display a Box in the bottom of the page not working in IOS

Question

I want this box to show in the bottom of the mobile page.When you are type on search box and the keyboard is show up the is not shown in the IOS view is still on the bottom:0px position. In stead of android is show up from the keyboard(this is the correct ).

  <BottomBox>
        <Button
          onClick={() => setIsOpen(true)}
          startIcon={<ScanIcon width={30} height={30} />}
        >
          SCAN QR CODE
        </Button>
</BottomBox>

My style for this Box is below

const BottomBox = styled(Box)(({ theme }) => ({
  width: "100%",
  position: "absolute",
  height: "58px",
  bottom: "0px",
  display: "flex",
  borderTop: `1px solid ${tokens.palette_grayscale_x_light_gray}`,
  justifyContent: "center",
  backgroundColor: tokens.palette_off_white_warm,
}));