Using GraphiQL.Button component returns "Element type is invalid: expected a string (for built-in components)..."

[sahingoko]

Hi,
I am trying to create a simple GraphiQL client for our project and used the graphiql package with create-react-app.
Here is how render() looks like in my App.js. Everyting works fine except the <GraphiQL.Button />. Whenever I add it inside Toolbar I get "Element type is invalid: expected a string (for built-in components)..." What am I missing? Why cannot I add buttons? Thanks.

import './App.css';
import React from 'react';
import GraphiQL from 'graphiql';
import { getIntrospectionQuery, buildClientSchema } from 'graphql';
import GraphiQLExplorer from 'graphiql-explorer'
import "graphiql/graphiql.css"
........
render() {
const { query, schema } = this.state

return (
  <div className="graphiql-container">
    <GraphiQLExplorer
      schema={schema}
      query={query}
      onEdit={this._handleEditQuery}
      explorerIsOpen={this.state.explorerIsOpen}
      onToggleExplorer={this._handleToggleExplorer}
    />
    <GraphiQL
      ref={ref => (this._graphiql = ref)}
      fetcher={graphQLFetcher}
      schema={schema}
      query={query}
      editorTheme={'dracula'}
      onEditQuery={this._handleEditQuery}
      onEditVariables={onEditVariables}
      onEditOperationName={onEditOperationName}
    >
    <GraphiQL.Logo>
      Custom Logo
    </GraphiQL.Logo>
    <GraphiQL.Toolbar>
      <GraphiQL.Button
        onClick={this.handleClickPrettifyButton}
        label="Prettify"
        title="Prettify Query (Shift-Ctrl-P)"
      />
      </GraphiQL.Toolbar>
    </GraphiQL>
  </div>
)

}
}

[dimaMachina]

#3192 (comment)