Responsive MaterialUI Divider, horizontal in small screens and vertical in md and large screens

Question

I am using this MaterialUI divider which is vertical in md and large screens. However I want it to be horizontal in xs and sm screens:

<Divider orientation="vertical" variant="middle" flexItem />

I've also tried :

const theme = useTheme();
const isSmallScreen = useMediaQuery(theme.breakpoints.down('xs'));

<Divider orientation={isSmallScreen ? 'horizontal' : 'vertical'} variant='middle' flexItem />

Also tried wrapping it in a Grid.

However I can't see any divider in xs and sm screens.

This is the whole JSX section:

<Card>
      <Grid2 container spacing={4} sx={{ minWidth: { xs: '100%', md: '715px' } }}>
        <Grid2 xs={12} md={4}>
          {booking_items.map(item => (
            <React.Fragment key={`${id}-${item.title}`}>
              <Typography variant='subtitle2'>{item.title}</Typography>
              <CardMedia component='img' image={item.imageUrl} title={item.title} />
            </React.Fragment>
          ))}
        </Grid2>
        <Divider orientation={isSmallScreen ? 'horizontal' : 'vertical'} variant='middle' flexItem /> 

        <Grid2 xs={12} md={8}>
          <CardContent>
            <Stack direction='row' spacing={1}>
              <CalendarBlankIcon sx={iconStyle} />
              <Typography variant='body1'>
                {formatDate(start_date)} - {formatDate(end_date).split(' at ')[1]}
              </Typography>
            </Stack>
            <Stack direction='row' spacing={1}>
              <UserAltIcon sx={iconStyle} />
              <Typography variant='body1'>{people} people</Typography>
            </Stack>
            <Stack direction='row' spacing={1}>
              <MapMarkerIcon sx={iconStyle} />
              <Typography variant='body1'>{address}</Typography>
            </Stack>

            <Box sx={{ display: 'flex', justifyContent: 'flex-end', mt: '25px' }}>
              <Button variant='text' color='secondary' endIcon={<ChevronRightIcon />}>
                View Booking
              </Button>
            </Box>
          </CardContent>
        </Grid2>
      </Grid2>
    </Card>

Any idea why?

Answer 1

"xs" is basically = 0px. Then, isSmallScreen evaluates to true only if your screen size takes nagative values, I am afraid