HeaderLinks.jsx: Define and upgrade react-popper dependency. about material-dashboard-react HOT 2 CLOSED

import { Manager, Reference, Popper } from "react-popper";
...
        <Manager>
          <Reference>
            {({ref}) => (
              <Button
                ref={ref}
                color={window.innerWidth > 959 ? "transparent" : "white"}
                justIcon={window.innerWidth > 959}
                simple={!(window.innerWidth > 959)}
                aria-label="Notifications"
                aria-owns={open ? "menu-list" : null}
                aria-haspopup="true"
                onClick={this.handleClick}
                className={classes.buttonLink}
              >
                <Notifications className={classes.icons} />
                <span className={classes.notifications}>5</span>
                <Hidden mdUp>
                  <p onClick={this.handleClick} className={classes.linkText}>
                    Notification
                  </p>
                </Hidden>
              </Button>
            )}
          </Reference>
          <Popper
            placement="bottom-end"
            eventsEnabled={open}
          >
          {({ref, style, placement, outOfBoundaries, scheduleUpdate, arrowProps }) =>(
            <div
              ref={ref}
              className={
                classNames({ [classes.popperClose]: !open }, { [classes.popperResponsive]: true })
              }
              style={{
                position: "absolute",
                willChange: "transform",
              }}
              data-placement={placement}
              >
              <ClickAwayListener onClickAway={this.handleClose}>
                <Grow
                  in={open}
                  id="menu-list"
                  style={{ transformOrigin: "0 0 0" }}
                >
                  <Paper className={classes.dropdown}>
                    <MenuList role="menu">
                      <MenuItem
                        onClick={this.handleClose}
                        className={classes.dropdownItem}
                      >
                        Mike John responded to your email
                      </MenuItem>
                      <MenuItem
                        onClick={this.handleClose}
                        className={classes.dropdownItem}
                      >
                        You have 5 new tasks
                      </MenuItem>
                      <MenuItem
                        onClick={this.handleClose}
                        className={classes.dropdownItem}
                      >
                        You're now friend with Andrew
                      </MenuItem>
                      <MenuItem
                        onClick={this.handleClose}
                        className={classes.dropdownItem}
                      >
                        Another Notification
                      </MenuItem>
                      <MenuItem
                        onClick={this.handleClose}
                        className={classes.dropdownItem}
                      >
                        Another One
                      </MenuItem>
                    </MenuList>
                  </Paper>
                </Grow>
              </ClickAwayListener>
            </div>
          )}
          </Popper>
        </Manager>
...