CSS Not Loading with passed Property in withStyles of MUI

I have a functional react component with a style defined as below:

const StyledInnerItem = withStyles((theme) => ({
  bgColor: {
    backgroundColor: (props) => {
      console.log('styledInnerItem color: ', props.color);
      return 'red';
    }
  }
}))(InnerItem);

Basically I am trying to pass the props.color as the background color, however it’s not even returning red which is set temporarily as the bg Color.
When I log the props, it is returning the color from the first render, and it is adding in the html file. but the styles only get added when I click on my component and the colors get applied to the component.

It works fine when the background Color is not a function and I need it to work the same by reading the color from the props.