```js
import React, { useState } from 'react'

export default function TextForm(props) {
  const upperCase = () => {
    console.log("On click is called!");
    let newText = text.toUpperCase();
    setText(newText);
  }

  const handleOnChange = (event) => {
    console.log("On change is called!");
    setText(event.target.value);
  }
  const [text, setText] = useState();
  return (
    <>
    <div className="container">
      <label htmlFor="exampleFormControlTextarea1" className="form-label">{props.heading}</label>
      <textarea className="form-control" value={text} onChange={handleOnChange} id="exampleFormControlTextarea1" rows="10"></textarea>
      <button onClick={upperCase} className="btn btn-primary">Convert to Uppercase</button>
    </div>
    <div className="container my-2">
      <h3>Your Text Summary</h3>
      <p> words and {text.length} characters</p>
    </div>
    </>
  )
}
```

this is my code. TextForm.js is located in components folder under src.React shows that length is undefined. What I have done wrong?