Как использовать state другого компонента?

У меня есть основной компонент и компонент где лежит state. Как использовать state в основном компоненте и изменять его при клике на кнопку? Вот основной компонент:

import './App.css';
import React, {useState , Component , setState } from "react";
import Myfunction from "./myFunction.js" ;// здесь лежит функция
class Add extends React.Component {
  render () {
    return(
      <div>
        <Myfunction ref="child" />
      <div>{this.props.state}</div>
        <button onClick={() => this.refs.child.getAlert()}>Click</button>
      </div>
    )
  }
}
export default Add;

Вот компонент где хранится state:

import React, {useState , Component , setState } from "react";
class Myfunction extends Component {
    constructor(props) {
        super(props);
        this.state = {
          name: "Dasha"
        };
    }
    getAlert() {
        setState({name:Masha})
     }
     render() {
      return (
        <div>{null}</div>
      );
     }
    }
export default  Myfunction;