Play/Pause toggle SVG button in React

Pause.js

import React from 'react'

const Pause = ({onPlayerClick}) => {
  return (
    <svg className="button" viewBox="0 0 60 60" onClick={onPlayerClick}>
      <polygon points="0,0 15,0 15,60 0,60" />
      <polygon points="25,0 40,0 40,60 25,60" />
    </svg>
  )
}

export default Pause

Play.js

import React from 'react'

const Play = ({onPlayerClick}) => {
  return (
      <svg className="button" viewBox="0 0 60 60" onClick={onPlayerClick}>
        <polygon points="0,0 50,30 0,60" />
      </svg>
  )
}

export default Play

Player.js

import React, { Component } from 'react'

class Player extends Component {

constructor(props) {
  super(props)
  this.state = {
    playing: false
  }
}

handlePlayerClick = () => {
  if (!this.state.playing) {
    this.setState({playing: true})
  } else {
    this.setState({playing: false})
  }
}

  render() {
    return (
      <div className="player" >
        {this.state.playing? <Pause onPlayerClick={this.handlePlayerClick} /> : <Play onPlayerClick={this.handlePlayerClick} />}
      </div>
    )
  }
}

export default Player