I am using the top example Navbar:

import React, { Component } from 'react';
import { Navbar, NavbarBrand, NavbarNav, NavbarToggler, Collapse, NavItem, Fa, NavLink } from '../MDB';

class FixedNavbar extends Component {
constructor(props) {
super(props);
this.state = {
collapse: false,
isWideEnough: false
};
this.onClick = this.onClick.bind(this);
}

onClick(){
this.setState({
collapse: !this.state.collapse,
});
}

render() {
const bgPink = {backgroundColor: '#ec407a'};
return (
<div>
<Navbar style={bgPink} dark expand="md" scrolling fixed="top">
<NavbarBrand href="/">
<strong>Navbar</strong>
</NavbarBrand>
{ !this.state.isWideEnough && <NavbarToggler onClick={this.onClick } />}
<Collapse isOpen = { this.state.collapse } navbar>
<NavbarNav left>
<NavItem>
<NavLink to="#">Home</NavLink>
</NavItem>
<NavItem>
<NavLink to="#">Features</NavLink>
</NavItem>
<NavItem>
<NavLink to="#">Pricing</NavLink>
</NavItem>
<NavItem>
<NavLink to="#">Options</NavLink>
</NavItem>
</NavbarNav>
<NavbarNav right>
<NavItem>
<NavLink to="#"><Fa icon="facebook"/></NavLink>
</NavItem>
<NavItem>
<NavLink to="#"><Fa icon="twitter&qgt;"/></NavLink>
</NavItem>
<NavItem>
<NavLink to="#"><Fa icon="instagram"/></NavLink>
</NavItem>
</NavbarNav>
</Collapse>
</Navbar>

</div>
);
}
}

export default FixedNavbar;

```

I get the following error in Chrome dev console from React:

warning.js:33 Warning: Received `true` for a non-boolean attribute `left`.

If you want to write it to the DOM, pass a string instead: left="true" or left={value.toString()}.
in ul (created by NavbarNav)
in NavbarNav (created by FixedNavbar)
in div (created by Collapse)
in Collapse (created by FixedNavbar)
in nav (created by Navbar)
in Navbar (created by FixedNavbar)
in div (created by FixedNavbar)
in FixedNavbar (created by App)
in div (created by App)
in App

How can I fix this?

React version: 16.3.1

MDB React version: 4.5.0

Thanks.