Ошибка типа: "valueoftextarea" только для чтения, не может изменить значение prop в реакции?

Question

Я создаю приложение React. где при нажатии на кнопку значение моего текстового поля изменяется. Кнопка находится в другом компоненте, а текстовое поле находится в другом компоненте. Я передаю значение 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

Кто-нибудь может помочь?