There are some problems in your code:

1. You have created a state for text and you don't need to get it by getElementById and Select.
2. writetext doesn't exist in navigator.clipborad. It should be writeText (it's case sensitive).
3. For using a state in whole component, it needs to define state in top of the component. So, move const [text, setText] = useState(''); to top of your component.
4. text state doesn't have value property. You can access its value just by text.

Here's the edited code:

function TextForm(props) {
   
  const [text, setText] = useState('');
    
  const handleCopy = () => {
      navigator.clipboard.writeText(text);
  }  
  const handleOnChange = (event) =>{
      setText(event.target.value);
  }
  return (
    <>
        <div className='container'>
            <h1>{props.heading} </h1>
            <div className="mb-3">
            <textarea className="form-control" 
            value={text} id="myBox" rows="8" onChange={handleOnChange}></textarea>
            
            <button className="btn btn-primary mx-2 my-2" onClick={handleCopy}>Copy Text</button>
           
            </div>
        </div>
        <div className="container my-3">
            <h2>Your text summary</h2>
            <p>{text.split(" ").length} Word and {text.length} Characters</p>
            <p>{0.008 * text.split(" ").length} Minute Read</p>
            <h3>Preview</h3>
            <p>{text}</p>
        </div>
    </>
  )
}

You have text value so You dont need to this

let text = document.getElementById("mybox");
text.Select();

So maybe just do like this

navigator.clipborad.writetext(text);