Quiero que este cuadro se muestre en la parte inferior de la página móvil. Cuando escribe en el cuadro de búsqueda y aparece el teclado, no se muestra en la vista de IOS todavía está en la parte inferior: posición 0px. En lugar de Android, se muestra desde el teclado (este es el correcto).

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

Mi estilo para este Box está abajo

 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, }));