Проблема со стилем настройки JSX HTMLAttribute для тега div в reactjs response-bootstrap

Я столкнулся с проблемой стиля настройки для атрибута html div в reactjs без jsx.

Я вычисляю высоту для div из calculateAvailableHeight(), чтобы содержимое div управлялось с помощью overflow: auto. но, к сожалению, я не могу установить стиль для тега div.

версии:

"react": "^16.6.3",

"react-bootstrap": "^0.32.4",

"react-dom": "^16.6.3",

Вот код responsejs для компонента реакции

import React,{Component} from "react";
import {Row,Col,Tab,Nav,NavItem} from 'react-bootstrap';
import {calculateAvailableHeight} from './../../lib/uiComponentLib

var heightList = calculateAvailableHeight(50);
var ccUserStyle = {

    height : heightList ,
    overflow:"auto !important",

};

вывод для heightList: 568px! важно

class UserList extends Component{



render(){

    console.info("Reaching inside ", heightList );

    return (

    <div style = {ccUserStyle}>
    <Tab.Container   id = "sidebarTabContainer" defaultActiveKey = "first" >
        <Row className = "clearfix">
            <Col sm = {12} className = "cc-no-padding">
                <Nav bsStyle = "pills" justified>
                    <NavItem eventKey = "first">User</NavItem>
                    <NavItem eventKey = "second">Group</NavItem>
                </Nav>
            </Col>
            <Col sm = {12} className = "cc-no-padding" style = height= {heightList} >
            <Tab.Content animation>
                <Tab.Pane eventKey = "first">

                Userlist
                </Tab.Pane>

                <Tab.Pane eventKey = "second">Group list</Tab.Pane>
            </Tab.Content>
            </Col>
        </Row>  
    </Tab.Container>
    </div>


  );
 }  
}

Я использую ccUserStyle object для установки стиля div. Но после рендеринга компонента я не вижу атрибутов стиля для тега div.

Пожалуйста, предложите и помогите мне исправить эту проблему.

Заранее спасибо.