Ionic react not showing Mapbox map on Android emulator

Thanks for replying!

This is the only warning that I got in the console:

index.js:1437 Warning: Received `true` for a non-boolean attribute `text-center`.

If you want to write it to the DOM, pass a string instead: text-center="true" or text-center={value.toString()}.
    in div (at LoginComponent.tsx:54)
    in ion-col (created by IonCol)
    in IonCol (created by ForwardRef(IonCol))
    in ForwardRef(IonCol) (at LoginComponent.tsx:53)
    in ion-row (created by IonRow)
    in IonRow (created by ForwardRef(IonRow))
    in ForwardRef(IonRow) (at LoginComponent.tsx:52)
    in ion-grid (created by IonGrid)
    in IonGrid (created by ForwardRef(IonGrid))
    in ForwardRef(IonGrid) (at LoginComponent.tsx:51)
    in form (at LoginComponent.tsx:50)
    in ion-content (created by IonContent)
    in IonContent (created by ForwardRef(IonContent))
    in ForwardRef(IonContent) (at LoginComponent.tsx:49)
    in Login (created by Context.Consumer)
    in Route (at App.tsx:34)
    in ion-router-outlet (created by IonRouterOutlet)
    in IonRouterOutlet (created by ForwardRef(IonRouterOutlet))
    in ForwardRef(IonRouterOutlet) (at App.tsx:32)
    in div (created by IonPageInternal)
    in IonPageInternal (created by ForwardRef(IonPage))
    in ForwardRef(IonPage) (at App.tsx:31)
    in NavManager (created by RouteManager)
    in RouteManager (created by Context.Consumer)
    in RouteManager (created by IonReactRouter)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by IonReactRouter)
    in IonReactRouter (at App.tsx:30)
    in ion-app (created by IonApp)
    in IonApp (created by ForwardRef(IonApp))
    in ForwardRef(IonApp) (at App.tsx:29)
    in App (at src/index.tsx:5)

And this is the tsx file of the component:

import React,{ useState } from 'react'
import MapGL, {GeolocateControl } from 'react-map-gl'
import 'mapbox-gl/dist/mapbox-gl.css'

const TOKEN= ''


const MapViewer = () => {

  const [viewport, setViewPort ] = useState({
    width: "100%",
    height: 900,
    latitude: 9.957537,
    longitude: -84.196117,
    zoom: 6
  })

  const _onViewportChange = viewport => setViewPort({...viewport, transitionDuration: 1000 })
  
  return (
    <div style={{ margin: '0 auto'}}>
      <h1 style={{textAlign: 'center', fontSize: '25px', fontWeight: 'bolder' }}>GeoLocator: Click To Find Your Location or click <a href="/search">here</a> to search for a location</h1>
      <MapGL
        {...viewport}
        mapboxApiAccessToken={TOKEN}
        mapStyle="mapbox://styles/mapbox/streets-v11"
        onViewportChange={_onViewportChange}
      >
        <GeolocateControl
          style={{
            float: 'left',
            margin: '50px',
            padding: '10px'
          }}
          positionOptions={{enableHighAccuracy: true}}
          trackUserLocation={true}
        />
      </MapGL>
    </div>
  )
}

export default MapViewer;

Thanks in advance!