How do you animate new styles in an SVG component with React?

Question

I am trying to perform a simple CSS styling animation on a Play button component (svg) when a user mouses over the play button, such that the opacity gradually increases and decreases when mousing over/out. I am trying to use the OnMouseEnter to pass down styling props to the Play button, but I have some problems:

The onMouseEnter method is not being activated (testing with a console.log) and while my styling props are being passed down, I am not sure how I can animate with -webkit-transitions or if that is even possible with React.

Here is my Play button component:

import React, { Component } from 'react';

class Play extends React.Component {

    static defaultProps = {
            fill: 'white',
            width: '100px',
            height: '100px',
            }

    render() {
        return (
            <svg width={this.props.width} height={this.props.height} viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <title>play</title>
                <defs></defs>
                <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
                        <g id="play" transform="translate(-2.000000, -2.000000)" fill={this.props.fill} fillRule="nonzero" opacity="0.8">
                                <g id="Rounded" transform="translate(2.000000, 2.000000)">
                                        <path d="M8.8,13.9 L13.47,10.4 C13.74,10.2 13.74,9.8 13.47,9.6 L8.8,6.1 C8.47,5.85 8,6.09 8,6.5 L8,13.5 C8,13.91 8.47,14.15 8.8,13.9 Z M10,0 C4.48,0 0,4.48 0,10 C0,15.52 4.48,20 10,20 C15.52,20 20,15.52 20,10 C20,4.48 15.52,0 10,0 Z M10,18 C5.59,18 2,14.41 2,10 C2,5.59 5.59,2 10,2 C14.41,2 18,5.59 18,10 C18,14.41 14.41,18 10,18 Z" id="Shape"></path>
                                </g>
                        </g>
                </g>
            </svg>
        )
    }
}

export default (Play);

Here's where my Play button is being used:

import React from 'react';

import { withStyles } from '@material-ui/core/styles';
import Play from '../assets/play.js'

const styles = () => ({
  playContainer: {
    position: 'absolute',
    top: 0, 
    left: 0,
    right: 0, 
    bottom: 0, 
    display: 'flex', 
    alignItems: 'center',
    justifyContent: 'center'
  },
})

const togglePlay = () => {
  console.log('hey')
}

class LandingPage extends React.PureComponent {

  render() {
    const classes = this.props.classes
    const style = {
      background: 'white',
      fill: 'black'
    }
    return (
            <div className={classes.playContainer}>
                    <Play style={style} onMouseEnter={this.togglePlay} />
            </div>
    );
  }
}

export default compose (withStyles(styles))(LandingPage);