I can’t seem to get the ActionSheet component to show up like it should.

this is my ActionModal.js component that houses the Sheet.

import React from 'react';
import { ActionSheet, AlertDialog } from 'react-onsenui';
import conveyances from '../markers/conveyance.png';
import travellers from '../markers/travellers.png';
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css'

const ActionModal = (props) => {

    console.log(props.name);
    return (
        <ActionSheet isOpen={true} >
            <p>{props.name}</p>
            <img src={travellers}/>
            <img src={conveyances}/>
        </ActionSheet>
    )
    
}

export default ActionModal

This is my App.js container where I render the ActionModal component.

import React, { Component } from 'react';
import MapView from './containers/MapView';
import TitleBar from './components/TitleBar';
import {Marker} from 'react-map-gl';
import ActionModal from './components/ActionModal';

import carIcon from './markers/car2.png';
import planeIcon from './markers/plane2.png';
import shipIcon from './markers/boat2.png';
import bcIcon from './markers/british-columbia.png';

import './App.css';
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css'
class App extends Component {
  state = {
    viewport: {
      width: '100vw',
      height: '100vh',
      latitude: 49.288826,
      longitude: -123.111122,
      zoom: 8
    },
    isModalOpen: false,
    currentSelectedRegion: {
      name: null
    }
  };

  

  _modalHandler = (name) => {
        const isOpen = this.state.isModalOpen;
        const currentName = name;
        console.log(currentName);
        this.setState({isModalOpen: !isOpen,
          currentSelectedRegion: {
            name: currentName
          }});
        // setTimeout(() => {
        //   console.log('after setSate' + this.state.isModalOpen);
        // }, 3000); 
      }

  _iconHandler = (icon) => {
    switch (icon) {
      case "carIcon":
        return carIcon;
      case "planeIcon":
        return planeIcon;
      case "shipIcon":
        return shipIcon;
      case "bcIcon":
        return bcIcon;
      default:
        break;
    }
  }

  _renderMarkers = (marker, i) => {
    const {name, coordinates, icon} = marker;
    console.log(name);
    return (
      <Marker key={i} longitude={coordinates[0]} latitude={coordinates[1]} >
        <div onClick={() => this._modalHandler(name)}>
        <img src={this._iconHandler(icon)}/>
        </div>
      </Marker>
    );
  }

  _handleViewportChange = (viewport) => {
    this.setState({viewport})
  }

  render() {
    return (
      <div>
        <TitleBar/>    
        <MapView viewport = {this.state.viewport} renderMarkers = {this._renderMarkers} handleViewportChange = {this._handleViewportChange}/>
        <ActionModal isOpen = {this.state.isModalOpen} name = {this.state.currentSelectedRegion.name}/>
      </div>
    );
  }
}

export default App;

The I am trying to get the component to show on top of a Map View page (a ReactMapGL map) when a Marker is tapped on.
This is that MapView code

import React, { Component } from 'react';
import ReactMapGL, {Marker} from 'react-map-gl';
import SegmentBar from '../components/SegmentBar';
import App from '../App';
import markerJson from '../data/markerJson';
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css'

const accessToken = 'pk.eyJ1IjoiamFzb25zbXl0aCIsImEiOiJjanA0Mm8wd3Ewb2h4M2txcnNqcHNvaG4wIn0.EWZeuDd8KwPHC6IjhE2fdg';
const mapboxStyle = 'mapbox://styles/jasonsmyth/cjp46uagu0mtj2spdtwgced8c';

const MapView = (props) => {
  return (
    <ReactMapGL
        {...props.viewport}
        onViewportChange={(viewport) => props.handleViewportChange(viewport)}
        mapboxApiAccessToken={accessToken}
        mapStyle= {mapboxStyle} style={{'zIndex': 0}}>
          { markerJson.map(props.renderMarkers) }
          <SegmentBar/>
      </ReactMapGL> 
  )
}
    
    
export default MapView;

I can see what I put inside the ActionSheet fine and it opens and closes (with the mask overlay) just fine. It just doesn’t seem to be getting any styling at all.
all I see is two icons and a line of text, no cancel button or box surround them.