React Map GL: la carte ne prend pas toute la largeur

J'utilise sémantique react ui comme bibliothèque ui et react map gl pour rendre les cartes dans mon application react. Mais les cartes rendues à partir de react-map-gl ne prennent pas toute la largeur de la colonne. Veuillez trouver l'image ci-dessous:

La ligne pointillée représente la colonne. Il y a encore assez de largeur pour que la carte s'étire. Mais selon la documentation, nous devons fournir la largeur et la hauteur de la carte en pixels.

Le code du conteneur est comme ci-dessous:

viewPort: {
        width: 800,
        height: 800,
        latitude: 21.1458,
        longitude: 79.0882,
        zoom: 4
    }

Alors que le composant qui contient la carte ressemble à ceci:

import React from 'react';
import ReactMapGL from 'react-map-gl';

const PincodesMap = ({ viewPort, handleViewportChange }) => (
    <ReactMapGL
        {...viewPort}
        mapStyle="mapbox://styles/mapbox/dark-v9"
        mapboxApiAccessToken="key"
        onViewportChange={handleViewportChange}
    />
);

export default PincodesMap;

Le code de la fenêtre d'affichage de la carte est le suivant:

    render() {
    return (
        <Grid style={{ padding: '20px' }}>
            <Grid.Row>
                <Grid.Column mobile={16} computer={12} style={{ border: 'dotted', paddingLeft: 0 }}>
                    <PincodesMap
                        viewPort={this.props.viewPort}
                        handleViewportChange={this.handleViewportChange.bind(this)}
                    />
                </Grid.Column>
                <Grid.Column mobile={16} computer={4} style={{ border: 1 }}>
                    This is test
                </Grid.Column>
            </Grid.Row>
        </Grid>
    );
}

Nous ne pouvons pas fournir la largeur en pourcentages. Comment le faire apparaître en pleine largeur? Aussi, comment redimensionner automatiquement la carte sur mobile?

Merci