React + Ag-grid + Webpack - reactjs

Question

I am using ag-grid with react. And i am unable to display grid properly,
please find below my code,
import React, {Component} from 'react'
import {render} from 'react-dom'
import {AgGridReact} from 'ag-grid-react'
import Logo from './components/Logo/'
import Link from './components/Link/'
import Child from './child.jsx'
export default class App extends Component {
constructor(props){
super(props);
this.state = {
columnDefs: [
{headerName: "Name", field: "Name"},
{headerName: "Age", field: "Age"}
],
rowData: [
{"Name": "Man", "Age":"25"},
{"Name": "Pal", "Age":"27"}
]
}
}
onGridReady(params) {
this.gridApi = params.api;
this.columnApi = params.columnApi;
this.gridApi.sizeColumnsToFit();
}
render() {
return (
<div>
<p className="f5p"><img className="f5logo" src="./src/assets/index.png" alt="F5 Logo"></img></p>
<h2 className="f5h1">CTU Log Viewer</h2>
<ul className="f5ul">
<li className="f5li">Logs</li>
<li className="f5li">Command Logs</li>
<li className="f5li">Installed Packages</li>
<li className="f5liabout">About</li>
</ul>
<div className="ag-fresh">
<AgGridReact
columnDefs = {this.state.columnDefs}
rowData = {this.state.rowData}
onGridReady = {this.onGridReady}
/>
</div>
</div>
)
}
}
I am also using webpack, and not sure if webpack causing the issue.
I am using babel, css-loader modules in webpack.
The grid rows are not coming properly, data is displayed in vertical manner.
I am unable to understand what is the issue.
Any help is much appreciated.
Thanks in advance.