Google maps disables button and input fields

My semantic-ui-react Menu component is acting strange when I add my google maps component to be rendered. Before I added my MapContainer, the FilterSection was working pretty fine. But after I render the MapContainer my sections in my Menu are no longer clickable nor do they react to my mouse hover. What should I do?

Snippet of render:

  return (
    <div>
      <Navbar/>
      <FilterSection/>
      <ChatWidget/>
      <div className="map-and-cards">
        <MapContainer/> // This line causes the problem
        <div style={containerStyle} className="cards-container">
          <div class="card-columns" style={{gridTemplateColumns: '350px 350px', display: 'grid', rowGap: '50px', columnGap: '18px'}}>
            <Cards listingData={listingData}/>
          </div>
        </div>
      </div>
    </div>
  )

and my MapContainer.js:

import React from 'react';
import { Map, GoogleApiWrapper } from 'google-maps-react';

const style = {
  position: 'relative',
  top: '65px',
  width: '47.5%', // 47.5
  height: '85%',
};


const defaultCenter = {
  lat: 41.04137, lng: 28.979530
}

export class MapContainer extends React.Component<MapProps> {

 render() {
  return (
    <Map
        style = {style}
        google={this.props.google}
        centerAroundCurrentLocation={true}
        zoom={12}
        initialCenter={defaultCenter}
    />
  );
 }
}

export default GoogleApiWrapper({
  apiKey: (0)
})(MapContainer) 

FilterSection.js:


import React, { Component } from "react";
import { Menu, Dropdown, Input, Button } from "semantic-ui-react";
import 'semantic-ui-css/semantic.min.css'

export class Price extends Component {
  state = { isOpen: false };

  handleItemClick = (e, { name }) => this.setState({ activeItem: name });

  render() {
    const { activeItem } = this.state;

    return (
    <div style={{float: 'left'}}>
      <Menu secondary >
       <Menu.Item>
        <Dropdown
          text={"Price"}
          className="item"
          onClick={this.toggleOpen}
          open={this.state.isOpen}
        >
          <Dropdown.Menu onClick={this.preventClosing}>
            <Dropdown.Header icon="money" content={" Price Range"} />
            <Dropdown.Divider />
            <form
              style = {{margin: '10px'}}
              name="id"
              type="number"
              max={900}
              action={<Button onClick={this.toggleOpen} content={"Send"} />}
            >
            <Input style={{zoom: '0.9'}} placeholder="min"/>&nbsp;—&nbsp;<Input style={{zoom: '0.9'}} placeholder="max"/>
            </form>
          </Dropdown.Menu>
        </Dropdown>
        </Menu.Item>
       </Menu>
      </div>
    );
  }

  toggleOpen = () => this.setState({ isOpen: !this.state.isOpen });
  preventClosing = e => e.stopPropagation();
}

export class BedsAndBaths extends Component {
  state = { isOpen: false };

  handleItemClick = (e, { name }) => this.setState({ activeItem: name });

  render() {
    const { activeItem } = this.state;

    return (
    <div style={{float: 'left'}}>
      <Menu secondary>
       <Menu.Item>
        <Dropdown
          text={"Bedrooms & Livingrooms"}
          className="item"
          onClick={this.toggleOpen}
          open={this.state.isOpen}
        >
          <Dropdown.Menu onClick={this.preventClosing}>
            <form
              style = {{margin: '10px'}}
              name="id"
              type="number"
              max={900}
              action={<Button onClick={this.toggleOpen} content={"Send"} />}
            >
            <Input style={{zoom: '0.9'}} placeholder="3"/>&nbsp;+&nbsp;<Input style={{zoom: '0.9'}} placeholder="1"/>
            </form>
          </Dropdown.Menu>
        </Dropdown>
        </Menu.Item>
       </Menu>
      </div>
    );
  }

  toggleOpen = () => this.setState({ isOpen: !this.state.isOpen });
  preventClosing = e => e.stopPropagation();
}

export class More extends Component {
  state = { isOpen: false };

  handleItemClick = (e, { name }) => this.setState({ activeItem: name });

  render() {
    const { activeItem } = this.state;

    return (
    <div style={{float: 'left'}}>
      <Menu secondary>
       <Menu.Item>
        <Dropdown
          text={"More"}
          className="item"
          onClick={this.toggleOpen}
          open={this.state.isOpen}
        >
          <Dropdown.Menu onClick={this.preventClosing}>
            <Dropdown.Header icon="money" content={" Price Range"} />
            <Dropdown.Divider />
            <form
              style = {{margin: '10px'}}
              name="id"
              type="number"
              max={900}
              action={<Button onClick={this.toggleOpen} content={"Send"} />}
            >
            <Input style={{zoom: '0.9'}} placeholder="min"/>&nbsp;—&nbsp;<Input style={{zoom: '0.9'}} placeholder="max"/>
            </form>
          </Dropdown.Menu>
        </Dropdown>
        </Menu.Item>
       </Menu>
      </div>
    );
  }

  toggleOpen = () => this.setState({ isOpen: !this.state.isOpen });
  preventClosing = e => e.stopPropagation();
}

export class Alert extends Component {
  state = { isOpen: false };

  handleItemClick = (e, { name }) => this.setState({ activeItem: name });

  render() {
    const { activeItem } = this.state;

    return (
    <div style={{float: 'left', position: 'relative', top: '11.5px', left: '15px', zoom: '0.9'}}>
      <Menu secondary >
      <button class="ui button ">
        Create Alert
      </button>
       </Menu>
      </div>
    );
  }

  toggleOpen = () => this.setState({ isOpen: !this.state.isOpen });
  preventClosing = e => e.stopPropagation();
}

export class Search extends Component {
  state = { isOpen: false };

  handleItemClick = (e, { name }) => this.setState({ activeItem: name });

  render() {
    const { activeItem } = this.state;

    return (
    <div style={{float: 'left', position: 'relative', top: '12px', right: '50px', zoom: '0.9'}}>
        <Menu secondary >
        <div style={{float: 'left', position: 'relative', right: '10px'}} class="ui input focus">
          <input type="text" placeholder="Enter an adress, neigborhood, city, or ZIP code
" size="45"/>
        </div>
        <button class="ui button ">
          Search
        </button>
       </Menu>
      </div>
    );
  }

  toggleOpen = () => this.setState({ isOpen: !this.state.isOpen });
  preventClosing = e => e.stopPropagation();
}


export default function FilterSection(){
  return (
    <div style={{position: 'relative', left: '75px', bottom: '1px'}}><Search/><div style={{position: 'relative', right: '30px'}}><More/><BedsAndBaths/><Price/><Alert/></div></div>
  )
}

As I said, only the

 component is triggering the deactivation of the menu.

You can see the actual page at royaremlak.com/search