JavaScript Изменение ориентации окна

Необходимо для мобильной версии при открытии попапа всегда менять ориентацию окна на книжную.

Сам попап реализован на библиотеке material-ui

import { useMediaQuery, Dialog, DialogTitle, DialogContent, Box } from '@material-ui/core';

...

<Dialog onClose={onClose} aria-labelledby="simple-dialog-title" open={isOpen} maxWidth="lg">
   <Box>
       <Box
           css={{
               display: 'flex',
               alignItems: 'center',
           }}
        >
            <DialogTitle>{title}</DialogTitle>
        </Box>
        <DialogContent css={{ padding: 0 }}>
            {React.Children.map(children, (child) => {
                if (React.isValidElement(child)) {
                    return React.cloneElement(child);
                }
            })}
        </DialogContent>
    </Box>
</Dialog>

Читала про ScreenOrientation.lock(), но смущает, что нет поддержки в Safari. Подскажите как можно решить эту проблему с Safari или другие методы или может есть плагины для react, которые могут помочь контролировать ориентацию экрана?