(I am new to React) This might be something simple but I have looked through a number of other issues like this and cant figure out what I am doing wrong. I am trying to just do a simple function on onMouseOver but for some reason it is never called.

Here is what I have thus far:

export default class CardLineItemProgressBarPart extends React.Component<Props> {
  constructor(props:Props) {
    super(props)
    this.showPopup = this.showPopup.bind(this)
  }

  componentDidMount() {
  
  }

  xOffset = 0;
  yOffset = 0;
  visible = false;

  render() {
    return (
      <div className="CardLineItemProgressBarPart"
      style={{
        backgroundColor: this.props.color,
        width: (this.props.percent + '%')
      }}
      onMouseOver={() => console.log("mouse enter")}>
    </div>
    )
  }
}

But I never see anything logged in the console. Am I missing something simple? This worked for me for onClick on another Component so I tried to mimic that here which I think I did but neither work on this component.