Hay algunos problemas en su código:

1. Ha creado un estado para el text y no necesita obtenerlo mediante getElementById y Select .
2. writetext no existe en navigator.clipborad . Debe ser writeText (se distingue entre mayúsculas y minúsculas).
3. Para usar un estado en todo el componente, debe definir state en la parte superior del componente. Entonces, mueva const [text, setText] = useState(''); a la parte superior de su componente.
4. el estado del text no tiene propiedad de value . Puede acceder a su valor con solo enviar un mensaje de text .

Aquí está el código editado:

 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> </> ) }

Tiene valor de text , por lo que no necesita esto.

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

Así que tal vez solo hagas esto

 navigator.clipborad.writetext(text);