Change Background Color of FloatingActionButton in material-ui ReactJs

I have a set of FloatingActionButton that I am using from material-ui in my ReactJS code as

<div className="callActionButtons">
  <FloatingActionButton style={{padding: '5px'}}>
    <VoiceSettingsIcon/>
  </FloatingActionButton>
  <FloatingActionButton style={{padding: '5px'}} onTouchTap={this.endCall}>
    <CallEndIcon  />
  </FloatingActionButton>
  <FloatingActionButton style={{padding: '5px'}}>
    <VideoIcon/>
  </FloatingActionButton>
</div> 

The UI currently looks like

I want to apply a backgroundColor property to the FloatingActionButton so that the center one has a red background and looks like

going through the documentation of FloatingActionButton. I tried to provide styles using

<FloatingActionButton style={{padding: '5px'}} 
         iconStyles={{backgroundColor: 'red'}} 
         onTouchTap={this.endCall}>

nothing changed

I also tried providing background color with inline style like

   <FloatingActionButton style={{padding: '5px', backgroundColor: 'red'}} 
         onTouchTap={this.endCall}>

With this I get the following display

I can't quite figure out how to get the desired result. Any help is appreciated.

Thanks in advance