React Headroom не работает с диалоговым окном Material UI (0.20.0)

Question

Я использую реактивный запас (^2.2.2), который не работает с диалогом React Matrial UI (0.20.0). Код приведен ниже. Пожалуйста, взгляните и дайте мне знать о проблеме. ТИА

Что я заметил: код Headroom работает только с прокруткой страницы, но в случае всплывающего окна содержимое прокручивается внутри div, поэтому его onPin, onUnpin и onUnfix не запускаются.

MyPopup.js

import React, { Component } from 'react';
import {withRouter} from 'react-router-dom';
import IconButton from 'material-ui/IconButton';
import Dialog from 'material-ui/Dialog';
import HeaderType2 from 'routes/common/HeaderType2';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import styles from '../style.scss';

const style = {
  dialogContentStyle:{
      width: '100%',
      maxWidth: 'none',
      padding:0,
      transform: 'translate(0, 0)'
  },
  dialogBodyStyle:{
      width: '100%',
      backgroundColor:'#eeeeee',
      padding:0,
      color:'black'
  },
  overlaystyle:{
    backgroundColor:'white',
    paddingTop:0
  }    
};

class MyPopup extends Component{ 
  state = {
    isPostCommentVisible:false    
  }

  postcomment = () => {    
    this.setState({isPostCommentVisible:true})
  }

  goBack = () =>{         
    if(this.state.isPostCommentVisible){
      this.setState({isPostCommentVisible:false})
    }   
  } 

  render() {   
    var that = this;    
    return(<MuiThemeProvider>
      <div> 
        <IconButton onClick={that.postcomment} iconClassName={`${styles.icons} ${styles.wm_icon_comment}`} iconStyle={style.iconStyle}  style={style.btnStyle} />       
        {
          (that.state.isPostCommentVisible)
          ?
          <Dialog contentStyle={style.dialogContentStyle} style={style.overlaystyle} overlayStyle={{backgroundColor:'transparent'}} bodyStyle={style.dialogBodyStyle} paperClassName={`${styles.boxShadowNone}`} bodyClassName={`${styles.bodyClassName}`} autoScrollBodyContent={true} repositionOnUpdate={false} open={that.state.isPostCommentVisible} modal={true}>

            <HeaderType2 styles={styles} title={"Offers and Questions"} goBack={this.goBack} />

            ... code ....
            ... code ....
            ... code ....
            ... code ....

          </Dialog>
          :
          null
        }

      </div>
    </MuiThemeProvider>);

  }
}

export default withRouter(MyPopup);

HeaderType2.js

import React, { Component } from 'react';
import Headroom from 'react-headroom';
import {withRouter} from 'react-router-dom';

import styles from './style.scss';

class HeaderType2 extends Component { 

  state={
      headroomStyleTranslateY:"translateY(0%)"
    }   

  onPin=() =>{
    this.setState({headroomStyleTranslateY:'translateY(0%)'});        
  }

  onUnpin=() =>{
    this.setState({headroomStyleTranslateY:'translateY(-100%)'});        
  }

  onUnfix=() =>{    
    this.setState({headroomStyleTranslateY:'translateY(0%)'});    
  }

  render() {
    var that = this;
    var headroomStyle = function() {
      return(
        {   
          transform:that.state.headroomStyleTranslateY,
          WebkitTransition: 'all .5s ease-in-out', 
          MozTransition: 'all .5s ease-in-out',
          OTransition: 'all .5s ease-in-out', 
          transition: 'all .5s ease-in-out',
          position:'fixed',
          width:'100%',
          top:0,
          zIndex:2

        }
      )
    }

    return (<Headroom pinStart={5} upTolerance={10} disableInlineStyles={true} wrapperStyle={{zIndex:2}} style={headroomStyle()} onPin={that.onPin} onUnpin={that.onUnpin} onUnfix={that.onUnfix}>
      <div className={styles.container}>
         ... code ....
         ... code ....
         ... code ....
      </div>
    </Headroom>);
  }
}

export default withRouter(HeaderType2);