react-map-gl-geocoder place outside of the map example: https://codesandbox.io/s/v0m14q5rly?file=/src/index.js

import "mapbox-gl/dist/mapbox-gl.css";
import "react-map-gl-geocoder/dist/mapbox-gl-geocoder.css";
import React, { Component } from "react";
import { render } from "react-dom";
import MapGL from "react-map-gl";
import DeckGL, { GeoJsonLayer } from "deck.gl";
import Geocoder from "react-map-gl-geocoder";


const MAPBOX_TOKEN =  "<YOUR MAPBOX API TOKEN>";

class App extends Component {
  state = {
    viewport: {
      width: 400,
      height: 400,
      latitude: 37.7577,
      longitude: -122.4376,
      zoom: 8
    },
    searchResultLayer: null
  };

  mapRef = React.createRef();
  geocoderContainerRef = React.createRef();

  componentDidMount() {
    window.addEventListener("resize", this.resize);
    this.resize();
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.resize);
  }

  resize = () => {
    this.handleViewportChange({
      width: window.innerWidth,
      height: window.innerHeight
    });
  };

  handleViewportChange = viewport => {
    this.setState({
      viewport: { ...this.state.viewport, ...viewport }
    });
  };

  // if you are happy with Geocoder default settings, you can just use handleViewportChange directly
  handleGeocoderViewportChange = viewport => {
    const geocoderDefaultOverrides = { transitionDuration: 1000 };

    return this.handleViewportChange({
      ...viewport,
      ...geocoderDefaultOverrides
    });
  };

  handleOnResult = event => {
    this.setState({
      searchResultLayer: new GeoJsonLayer({
        id: "search-result",
        data: event.result.geometry,
        getFillColor: [255, 0, 0, 128],
        getRadius: 1000,
        pointRadiusMinPixels: 10,
        pointRadiusMaxPixels: 10
      })
    });
  };

  render() {
    const { viewport, searchResultLayer } = this.state;

    return (
      <div>
        <div
          ref={this.geocoderContainerRef}
          style={{
            height: 50,
            background: "black",
            display: "flex",
            alignItems: "center",
            paddingLeft: 4
          }}
        />
        <MapGL
          ref={this.mapRef}
          {...viewport}
          onViewportChange={this.handleViewportChange}
          mapboxApiAccessToken={MAPBOX_TOKEN}
        >
          <Geocoder
            mapRef={this.mapRef}
            containerRef={this.geocoderContainerRef}
            onResult={this.handleOnResult}
            onViewportChange={this.handleGeocoderViewportChange}
            mapboxApiAccessToken={MAPBOX_TOKEN}
          />
          <DeckGL {...viewport} layers={[searchResultLayer]} />
        </MapGL>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

Alex,

I did a codesandbox to you check (just need to add you API Key).

• If you search for coffee, you will see QUERY: coffee in console.

So, the only difference from your code to mine is:

• mapbox-gl-geocoder import.

You are doing like this:

import Geocoder from 'mapbox-gl-geocoder';
import 'mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css'

And I'm doing like this:

import Geocoder from "@mapbox/mapbox-gl-geocoder";
import "@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css";

As i don´t know how you added the mapbox-gl-geocoder package, i will describe how i did:

I'm using yarn:

yarn add react-map-gl-geocoder

If you are using npm:

npm install react-map-gl-geocoder

After that, my package.json has this versions:

"react": "^16.13.1",
"mapbox-gl": "^1.3.1",
"@mapbox/mapbox-gl-geocoder": "^4.7.0",

Maybe that could be the issue. Hope it works for you.