Adding slimscroll to reactJS

I am trying to add Slimscroll to a ReactJS app and I see the scrollbar reflect in the browser dev tools but I am getting an error in the console and the UI is breaking. AS a sidenote, the app compiles successfully.

This is my App.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import classnames from 'classnames';
import 'jquery-slimscroll/jquery.slimscroll.min';
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';


class App extends Component {
    componentDidMount() {
        $(".scroll").slimscroll({
            height: '100%'
        });
    }
    render() {
       <MuiThemeProvider muiTheme={getMuiTheme(materialUITheme)}>
            <div id="app-inner">
                ....blah blah blah....
            </div>
       </MuiThemeProvider>
    };
}

module.exports = App;

Then in the index.html I added the scroll class to the <body>

I intend to use this on other places with an overflow like scrolling tables or lists, so I'd rather have the slimscroll function attached to a utility class I can re-use (i.e. scroll)

As you can see below, the slimscroll is passing to the DOM

But the UI breaks because ReactJS doesn't like the method I used in some way.

Lots of things not working (i.e. the menu, the page displays partially, etc)

How can I add slimscroll to ReactJS. I looked at react-scrollbar in npm but it requires to wrap the element in <ScrollBar></ScrollBar> and I can't do that to the body