Как изменить значение у обоих компонентов?

Есть два компонента "My1" и "My2" , есть функция myFunction(). Компоненты не имеют общего предка и не взаимосвязаны. Обои компонента похожи и ссылаются на одну и тужу функцию. Вопрос как сделать так , чтобы при нажатии на кнопку любого из компонента значения менялись у обоих компонентов. То есть у обоих компонентов должно поменяться слово "Не нажал " на "Нажал" при нажатии на любую кнопку.

Вот первый компонент:

import React from 'react';
import Myfunction from "./myFunction.js" ; // здесь лежит функция

class My1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        name: "Не нажал" 
    };
  }
  NewStateOne = () => {
    Myfunction(this.state);
    console.log(this.state.name)
    this.setState({name: this.state.name})
  }
  render () {
    return(
      <div>
        <div>{this.state.name}</div>
        <button onClick={this.NewStateOne}>Click</button>
      </div>
    )
  }
}
export default My1;

Вот второй компонент:

import React from 'react';
import Myfunction from "./myFunction.js" ; // здесь лежит функция

class My2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        name: "Не нажал" 
    };
  }
  NewStateTwo = () => {
    Myfunction(this.state);
    console.log(this.state.name)
    this.setState({name: this.state.name})
  }
  render () {
    return(
      <div>
        <div>{this.state.name}</div>
        <button onClick={this.NewStateTwo}>Click</button>
      </div>
    )
  }
}
export default My2;

Вот функция:

const Myfunction = (props) => {
  props.name = "Нажал";
  return props.name;
} 
export default Myfunction;

Я новичок в React буду рад любым идеям и критики.