renderHtmlDOMWithReact.js

const onOpen = (selectedDates, dateStr, instance) => {                      
  if(!document.getElementById('selectRanges')) {

    let _elem = document.getElementsByClassName(instance.calendarContainer.classList.value)[0]
    let elemClone = _elem.cloneNode(true)

    function createMarkup() {
      return {__html: elemClone.innerHTML};
    }
    const ElemFinal = (props) => (
      <Fragment >
        <div  dangerouslySetInnerHTML={createMarkup()}></div>
        <div id='selectRanges'>
        <Button color='link' size='sm' onClick={e => this.rangeDates('lastYear')}>Last Year</Button>
        <Button color='link' size='sm' onClick={e => this.rangeDates('lastMonth')}>Last Month</Button>
        <Button color='link' size='sm' onClick={e => this.rangeDates('lastWeek')}>Last Week</Button>
        <Button color='link' size='sm' onClick={e => this.rangeDates('today')}>Today</Button>
        </div>
      </Fragment>
    )

    ReactDOM.render(<ElemFinal/>, document.getElementsByClassName(instance.calendarContainer.classList.value)[0])                          
  }
}