1  import {PropsWithChildren} from 'react';
 2  import Box from '@mui/material/Box';
 3  import {ThemeProvider} from '@mui/material/styles';
 4  import theme from '../../theme';
 5  import useMediaQuery from '@mui/material/useMediaQuery';
 6  
 7  const MapWrapper = ({children}: PropsWithChildren) => {
 8    const mobile = useMediaQuery(theme.breakpoints.down('md'));
 9    return (
10      <ThemeProvider theme={theme}>
11        <Box
12          id="map"
13          width="100%"
14          height={mobile ? '40vh' : '50vh'}
15          sx={{position: 'relative'}}
16        >
17          {children}
18        </Box>
19      </ThemeProvider>
20    );
21  };
22  
23  export default MapWrapper;