我正在制作一个React应用。在单击按钮的位置，我的textarea的值得到更改。该按钮位于不同的组件中，而textarea位于不同的组件中。我将textarea的值作为道具传递给按钮组件。但这会引发错误 TypeError：“ valueoftextarea”是只读的

这是我的App.js

import React from 'react'; 
import './App.css';
import Button from './Button';

function App() {

  var valueoftextarea = '';

  return (
    <div classname="App">

          <textarea cols="30" rows="10" value={valueoftextarea}></textarea>
            <Button valueoftextarea={valueoftextarea}/>
    </div>
  );
}

export default App;

这是我的Button.js

import React,{Component} from 'react'

class Button extends Component {

   clickhandler = (event) => {
       this.props.valueoftextarea = this.props.valueoftextarea + `${event.target.innerHTML}`
       console.log(this.props.valueoftextarea);
   }

   render(){
    return (
        <div>
                <button onClick={this.clickhandler} classname="buttons">Click Me</button>
        </div>
    )
   }
}

export default Button

有人可以帮忙吗？