How to use the react-modal/lib/index.setAppElement function in react-modal

/*global Mousetrap*/
import _ from 'lodash';
import uuid from 'uuid';
import React from 'react';
import ReactDOM from 'react-dom';
import GraphiQL from 'graphiql/dist';
import Modal from 'react-modal/lib/index';
import { request as httpRequest } from 'http';
import { request as httpsRequest } from 'https';

Modal.setAppElement(document.getElementById('react-root'));

import HTTPHeaderEditor from './HTTPHeaderEditor';


export default class App extends React.Component {
  constructor() {
    super();

    const storage = window.localStorage;

    this.state = {
      headerEditOpen: false,
      currentTabIndex: storage.getItem('currentTabIndex') ? parseInt(storage.getItem('currentTabIndex')) : 0,
      tabs: storage.getItem('tabs') ? JSON.parse(storage.getItem('tabs')) : [
        {
          name: null,