TypeError: Cannot read property 'remove' of undefined __ Cannot read property 'addControl' of null - about react-map-gl-geocoder HOT 6 CLOSED

import './map.scss';
import React, { useRef } from 'react';
import mapboxgl from 'mapbox-gl';
import ReactMapGL, { Marker, Source, layer } from 'react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import 'react-map-gl-geocoder/dist/mapbox-gl-geocoder.css';
import Geocoder from 'react-map-gl-geocoder';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import DropoffPinWithLayer  from '../../pages/Routing/Components/Pins/dropoffWithLayer'

const Map = (props) => {
  let ZoomCustomer, MarkAllCustomers, GeocoderTag, SearchBarRefrence;
  const geocoderContainerRef = React.useRef();
  const mapRef = useRef();
 
   if(props.isSearchOutOfMap === true) {
    SearchBarRefrence = (<div ref={geocoderContainerRef} />);
   }

  if (props.geocoder == true) {
    GeocoderTag = (
      <Geocoder
        containerRef={geocoderContainerRef}
        mapRef={mapRef}
        onViewportChange={props.handleGeocoderViewportChange}
        mapboxApiAccessToken={mapboxgl.accessToken}
        position={props.position}
        onResult={props.handleOnResult}
        ReverseGeoCode={true}
        onClear={props.handleOnClear}
      />
    );
  }
  if (props.customerToZoom == true) {
    ZoomCustomer = (
      <Marker latitude={props.customerToMark.lat} longitude={props.customerToMark.lon} >
        {props.marker}
      </Marker>
    );
  }
  if (props.customerToZoom == true && props.itsDraggable === true) {
     
    ZoomCustomer = (
      <DropoffPinWithLayer
        location={ props.customerToMark }
        onDragEnd={props.handleOnDragEnd}
        radius={props.radius}
      />
    );
  }

  if (props.markCustomers == true) {
    let customers = props.customers;
    MarkAllCustomers = customers.map((customer) => {
      const { lon, lat, uuid } = customer;
      if (props.customerArr) {
        return (
          <Marker key={uuid} longitude={lon} latitude={lat}>
            <i
              type="button"
              className={clsx(props.styles.pin, { [props.styles.selected]: props.customerArr.includes(customer) })}
              onMouseDown={() => props.mouseDown(customer)}
            />
          </Marker>
        );
      } else if (props.selcustomers) {
        return (
          <Marker key={uuid} longitude={lon} latitude={lat}>
            <i
              type="button"
              className={clsx(props.styles.pin, { [props.styles.selected]: customer.name === props.selCustomer })}
              onMouseDown={() => props.mouseDown(customer.name)}
            />
          </Marker>
        );
      }
    });
  }

  return (
    <div>
  {SearchBarRefrence}
    <ReactMapGL
      {...props.viewport}
      ref={mapRef}
      width={props.width}
      onClick={(event) => {
        props.handleOnClickEnd(event)
      }}
      height={props.height}
      onViewportChange={props.handleViewportChange}
      mapboxApiAccessToken={mapboxgl.accessToken}
      mapStyle="mapbox://styles/mapbox/outdoors-v11"
      >
      {ZoomCustomer}
      {MarkAllCustomers}
      {GeocoderTag}
    </ReactMapGL>
    
    </div>
  );
};

Map.propTypes = {
  width: PropTypes.string,
  onViewportChange: PropTypes.func,
  mapboxApiAccessToken: PropTypes.string,
  onResult: PropTypes.func,
  onClear: PropTypes.func,
  position: PropTypes.string,
  itsDraggable: PropTypes.bool,
  handleOnDragEnd: PropTypes.func,
  radius: PropTypes.number,
  height: PropTypes.string,
  handleOnClickEnd: PropTypes.func,
};

Map.defaultProps = {
  width: '100px',
  handleOnClickEnd: (event) => {console.log(event)},
  handleOnDragEnd: () => {},
  onViewportChange: () => {},
  onResult: () => {},
  onClear: () => {},
  mapboxApiAccessToken: '',
  position: 'top-left',
  itsDraggable: false,
  radius: 0,
  height: "220px"
};

export default Map;