How to customise css for react-bootstrap Dropdown open state?

I'm using react-bootstrap v0.28.5 and trying to customise the background colour of the Dropdown.Toggle when the Dropdown component is open (see the toggle button with grey background in the 1st pic).

Any idea how I can achieve this?

I've been able to customise the Dropdown style as shown in the code below, but it seems that bootstrap has its own "open" class (see element tree in 2nd pic), which I can't figure out how to access using react className. I've looked in the source code for react-bootstrap/lib/Dropdown.js for some clues but no luck.

react component

 <Dropdown className={styles.container}>
    <Dropdown.Toggle className={styles.toggle} noCaret>
      <div className={styles.title}>Title</div>
      <div className={styles.placeholder}>Selection</div>
    </Dropdown.Toggle>
    <Dropdown.Menu>
      <MenuItem eventKey="1" onSelect={(key, e) => onSelect(key, e)}>
        Action
      </MenuItem>
      <MenuItem eventKey="2">Another action</MenuItem>
      <MenuItem eventKey="3">Active Item</MenuItem>
    </Dropdown.Menu>
  </Dropdown>

styles.scss

.container {
 display: block;
 width: 100%;
 height: 100%;

 .toggle {
  border: none;
  text-align: start;
  width: 100%;
  padding: 0;

 .title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
 }

 .placeholder {
  font-size: 16px;
 }

 &:hover {
  background: #e4e5e9;
 }
}

I've tried looking at the source code but I don't see how to customise the "open" class.

Pic 1: Dropdown component

Pic 2: Page elements

Any help will be appreciated! Thanks a lot.