React TS Mui Material Swipeable Drawer - Partial Visibility

Question

I am trying to get the Swipeable Drawer in Material UI for React to be a little bit more pulled up so I can show some of the information that is already in the drawer prior to pulling it up. Currently I can only see the drawers title - but I want to pull it up a few more pixels akin to Google Maps in Mobile View when you can see a little bit of information before fully pulling the drawer open.

Currently any alterations I'm doing is causing clipping issues - such as changing the drawer bleeding or heights.

Current:

Desired:

When you fully pull up the drawer a list object of similar types will be rendered fully like this:

import React, { useState, useEffect } from 'react';
import { Global } from '@emotion/react';
import { styled } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { grey } from '@mui/material/colors';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import SwipeableDrawer from '@mui/material/SwipeableDrawer';
import ScanHistory from './ScanHistory';
import useScreenSize from '../../ts/useScreenSize';

const drawerBleeding = 56;

const Root = styled('div')(({ theme }) => ({
    height: '100%',
    backgroundColor:
    theme.palette.mode === 'light' ? grey[100] : theme.palette.background.default,
 }));

const StyledBox = styled(Box)(({ theme }) => ({
     backgroundColor: theme.palette.mode === 'light' ? '#fff' : grey[800],
}));

const Puller = styled(Box)(({ theme }) => ({
    width: 30,
    height: 6,
    backgroundColor: theme.palette.mode === 'light' ? grey[300] : grey[900],
    borderRadius: 3,
    position: 'absolute',
    top: 8,
    left: 'calc(50% - 15px)',
 }));

export default function ScanHistoryDrawer(props: any) {
const { scanResponses, setScanResponses } = props
const { window } = props;
const [open, setOpen] = useState(false);
const [mountDrawer, setMountDrawer] = useState(false);

const toggleDrawer = (newOpen: boolean) => () => {
    setOpen(newOpen);
};

const container = window !== undefined ? () => window().document.body : undefined;

const screenSize = useScreenSize();

useEffect(() => {
    if (screenSize.width <= 900) {
        setMountDrawer(true)
    } else if (screenSize.width > 900) {
        setMountDrawer(false)
    }
}, [screenSize])

return (
    <Root>
        <CssBaseline />
        <Global
            styles={{
                '.MuiDrawer-root > .MuiPaper-root': {
                    height: `calc(50% - ${drawerBleeding}px)`,
                    overflow: 'visible',
                },
            }}
        />
        <SwipeableDrawer
            container={container}
            anchor="bottom"
            open={open}
            onClose={toggleDrawer(false)}
            onOpen={toggleDrawer(true)}
            swipeAreaWidth={drawerBleeding}
            disableSwipeToOpen={false}
            ModalProps={{
                keepMounted: mountDrawer,
            }}
            allowSwipeInChildren={true}
        >
            <StyledBox
                sx={{
                    position: 'absolute',
                    top: -drawerBleeding,
                    borderTopLeftRadius: 8,
                    borderTopRightRadius: 8,
                    visibility: 'visible',
                    right: 0,
                    left: 0,
                }}
            >
                <Puller />
                <Typography sx={{ p: 2, color: 'text.secondary' }}>Scan Results</Typography>
            </StyledBox>
            <StyledBox
                sx={{
                    px: 2,
                    pb: 2,
                    height: '100%',
                    overflow: 'auto',
                }}
            >
                <ScanHistory scanResponses={scanResponses} setScanResponses={setScanResponses}></ScanHistory>
            </StyledBox>
        </SwipeableDrawer>
    </Root>
);

}