const [show, setShow] = useState(false)

const changeVisibility = () => {
  setShow(!show)
}

return (
<>
    <div className="ui form">
        {show && (
            <div className="field">
                <textarea rows="2"></textarea>
            </div>
        )}
    </div>
    <button onClick={changeVisibility}>show</button>
</>  
);

Here's a simple example.

1. Use useState to manage the visibility of the text area.

2. Attach a handler to the button that calls a function that updates the state.

3. Use a class called hidden. Initially the textarea won't have it but you can conditionally add it if the updated state tells you to.

const { useEffect, useState } = React;

function Example() {

  const [ visible, setVisible ] = useState(true);

  function handleClick() {
    setVisible(!visible);
  }

  return (
    <div>
      <button onClick={handleClick}>Toggle visibilty</button>
      <textarea className={!visible && 'hidden'}></textarea>
    </div>
  );
};

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

.hidden { visibility: hidden; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Make a state variable to keep track of the textarea visible state, then in the textarea tag, add style for using that state variable. Then onlick event, toggle the state variable either to false or true.