Google map does not shrink when user opens sidebar

Question

I am new to both React and Grommet and have worked through the getting started tutorial. When I add a google map to the main container it renders and fills the whole screen. However, when I click the notification icon to load the sidebar it only renders in a tiny column on the side. Is there a way for me to edit the style to adjust the width automatically or do I need to have the container width as a property that changes when the button is clicked? (Please excuse any question format errors as this is my first post.)

I have tried looking through the Grommet box props and various CSS style settings without success.

App.js:

const { showSidebar } = this.state;
    return (
      <Grommet theme={theme} full>
        <ResponsiveContext.Consumer>
          {size => (
            ...

              <Box direction='row' flex overflow={{ horizontal: 'hidden' }}>
                <Box
                  align='start'
                  justify='start'
                  fill='horizontal'
                  responsive='true'              
                >
                  <MapContainer />
                </Box>

                {!showSidebar || size !== 'small' ? (
                  <Collapsible direction='horizontal' open={showSidebar}>
                    <Box
                      flex
                      width='medium'
                      background='light-2'
                      elevation='small'
                      align='center'
                      justify='center'
                    >
                      sidebar
                    </Box>
                  </Collapsible>
                ) : (

...

}
              </Box>
            </Box>
          )}
        </ResponsiveContext.Consumer>
      </Grommet>
    );

MapContainer.js:

return (
      <Map google={this.props.google} zoom={14}/>
    );

I would like the map to shrink to fill the container/the container to shrink when the sidebar loads.