DataSearch component executes search every time a key is pressed

Question

So I'm trying to make the DataSearch component behave but the component calls the search/triggerquery for every key stroke and I don't understand why. Also javascript throws an exception because it want's the dataField attribute defined even though I'm making use of a customQuery. I only want the query to be called, when the user presses enter. Can anyone help?

class DocumentSearchComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      corpus: "xxxx",
      url: "http://localhost:7777",
    };
    this.handleKey = this.handleKey.bind(this);
    this.onChange = this.onChange.bind(this);
  }

  handleKey(e, triggerQuery) {
    if (e.key === "Enter") {
      triggerQuery();
    }
  };

  onChange(value) {
    this.setState({
      value,
    });
  };

  customQuery(test) {
    return {
      query: {...}
      },
      _source: ["title", "publicationDate"],
      size: 10,
      highlight: {
        pre_tags: ['<em>'],
        post_tags: ['</em>'],
        fields: {
          fullText: {}
        }
      }
    }
  }


  render() {
    return (
      <div className="App">
        <ReactiveBase app={this.state.corpus} url={this.state.url}>
          <DataSearch
            componentId="documentSearch"
            className="search-bar"
            placeholder="Search for documents"
            autosuggest={false}
            customQuery={this.customQuery}
            value={this.state.value}
            onChange={this.onChange}
            onKeyPress={this.handleKey}
          />
          <ReactiveList
            className="result-list"
            componentId="SearchResult"
            react={{
              and: "documentSearch",
            }}
            dataField="label"
            sortOptions={[
              { label: "Relevance", dataField: "_score", sortBy: "desc" },
            ]}
          >
            {({ data }) =>
              data.map((item) => (
                <div key={item.id} className="vertical-margin">
                  <DocumentResult
                    corpus={this.state.corpus}
                    document={item}
                  ></DocumentResult>
                </div>
              ))
            }
          </ReactiveList>
        </ReactiveBase>
      </div>
    );
  }