Matériau UI: grille de couverture de pont

Je travaille avec React et Material-UI. Je veux diviser le code en deux colonnes. Dans l'un de ceux-ci, je souhaite rendre une carte à l'aide de deck.gl. Apparemment, deck.gl est rendu en plein écran et couvre tout l'écran. J'ai même essayé de définir les attributs width = {80} et height = {80} sur le composant DeckGL mais il couvre toujours le reste de la page.

App.js

/// app.js
import React from 'react';
import DeckGL, {PolygonLayer} from 'deck.gl';
import {StaticMap} from 'react-map-gl';

// Set your mapbox access token here
const MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoibWZvZ2xpbyIsImEiOiJjamt2N2Z2aWkwNXJxM3BxNXo4Mmt1a3MwIn0.IqS5iv1ZmLht4hm-N0cDYg';

// Initial viewport settings
const initialViewState = {
  longitude: -87.630259,
  latitude: 41.873400,
  zoom: 13,
  pitch: 35,
  bearing: 0
};

// Data to be used by the LineLayer
const data = [{sourcePosition: [-122.41669, 37.7853], targetPosition: [-122.41669, 37.781]}];

class Map extends React.Component {
  
  render() {
    const layers = [
    ];

    return (
      <DeckGL
        initialViewState={initialViewState}
        controller={true}
        layers={layers}
      >
        <StaticMap 
          mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} 
          />
      </DeckGL>
    );
  }
}

export default Map;

Map.js

import React, { Component } from 'react';
import './App.css';
import Grid from '@material-ui/core/Grid';
import Map from './Map.js';

class App extends Component {

  render() {
    
    return (
      <div >
      <Grid container spacing={24}>
        <Grid item xs={3}>
          Column text
        </Grid>
        <Grid item xs={9}>
          <Map/>
        </Grid>
       
      </Grid>
      </div>
        
    );
  }
}

export default App;