Change state of component using another component

Question

I'm super new to react so pardon me if this is a stupidly simple question but I'd like to change the state of an image (the component 'Title') when the cursor hovers of the play button (the component 'playbutton'). Any help would be appreciated.

Thank you!

Here is the code for Title:

import React from 'react'
import './Title.css';


class Title extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
       imgSrc: require('./dalogo')
    };
    this.handleMouseOver = this.handleMouseOver.bind(this);
    this.handleMouseOut = this.handleMouseOut.bind(this);
  }

  handleMouseOver() {
    this.setState({
      imgSrc: require('./difflogo')
    });
  }

  handleMouseOut() {
    this.setState({
      imgSrc: require('./dalogo')
    });
  }

  render() {
    return (
      <div className='logo'>
        <img onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} src={this.state.imgSrc} width = {1000} heigth = {900} alt = 'Logo'/>
      </div>
    );
  }


}

Title.propTypes = {
}

Title.defaultProps = {
}

export default Title;

Here's the code for PlayButton:

import React from 'react'
import './PlayButton.css';
import logo2 from './difflogo';
import logo from './dalogo';
import Title from './Title';

class PlayButton extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
           imgSrc: require('./playbutton.png')
        };
    this.handleMouseOver = this.handleMouseOver.bind(this);
    this.handleMouseOut = this.handleMouseOut.bind(this);
    }

    handleMouseOver () {
        this.setState({
            imgSrc: require('./playbuttonblue.png')
        });
        this.changeState();
    }

    handleMouseOut () {
        this.setState({
            imgSrc: require('./playbutton.png')
        });
    }
    render() {
        return (
          <div className='playbutton'>
             <button className='buttonprop'>
              <img onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} src={this.state.imgSrc} width = {100} heigth = {50} alt = 'Play'/>
              </button>
          </div>          
        );
    }
}

PlayButton.propTypes = {
}

PlayButton.defaultProps = {
}
export default PlayButton