How to use graphiql-explorer with express-graphql

I ran the express-graphql by this code.

var { graphqlHTTP } = require('express-graphql');
var { buildSchema } = require('graphql');

// Construct a schema, using GraphQL schema language
var schema = buildSchema(`
  type Query {
    hello: String
  }
`);

// The root provides a resolver function for each API endpoint
var root = {
  hello: () => {
    return 'Hello world!';
  },
};

var app = express();
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,
}));
app.listen(4000);
console.log('Running a GraphQL API server at http://localhost:4000/graphql');

but it only has Prettify, Merge, Copy, History toolbar. I want to add Explorer toolbar using graphiql-explorer library Is there a way to do that?

This is the current running screen.

And want like this.