Почему textarea внутри modal window закрывает его

Имеется модальное окно:

import ReactDOM from 'react-dom';
import { CommentForm } from '../CommentForm';
import { CommentList } from '../CommentForm/CommentList';
import styles from './post.css';

interface IPost {
  onClose?: () => void,
  id?: string,
  avatar?: string
}

export function Post({ onClose, id }: IPost) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    function handleClick(event: MouseEvent) {
      if (event.target instanceof Node && !ref.current?.contains(event.target)){
        onClose?.();
      }
    }
    document.addEventListener('click', handleClick);


    return () => {
      document.removeEventListener('click', handleClick)
    }
  }, []);

  const node = document.querySelector('#modal_root');
  if (!node) return null;

  return ReactDOM.createPortal((
    <div className={styles.modal} ref={ref} >
      <h2>Следует отметить, что новая модель организационной деятельности поможет</h2>

      <div className={styles.content}>
        <p>Есть над чем задуматься: тщательные исследования конкурентов представляют собой не что иное, как квинтэссенцию победы маркетинга над разумом и должны быть ассоциативно распределены по отраслям. Прежде всего, начало повседневной работы по формированию позиции однозначно фиксирует необходимость кластеризации усилий. Но сторонники тоталитаризма в науке и по сей день остаются уделом либералов, которые жаждут быть превращены в посмешище, хотя само их существование приносит несомненную пользу обществу.</p>
        <p>Есть над чем задуматься: тщательные исследования конкурентов представляют собой не что иное, как квинтэссенцию победы маркетинга над разумом и должны быть ассоциативно распределены по отраслям. Прежде всего, начало повседневной работы по формированию позиции однозначно фиксирует необходимость кластеризации усилий. Но сторонники тоталитаризма в науке и по сей день остаются уделом либералов, которые жаждут быть превращены в посмешище, хотя само их существование приносит несомненную пользу обществу.</p>
        <p>Есть над чем задуматься: тщательные исследования конкурентов представляют собой не что иное, как квинтэссенцию победы маркетинга над разумом и должны быть ассоциативно распределены по отраслям. Прежде всего, начало повседневной работы по формированию позиции однозначно фиксирует необходимость кластеризации усилий. Но сторонники тоталитаризма в науке и по сей день остаются уделом либералов, которые жаждут быть превращены в посмешище, хотя само их существование приносит несомненную пользу обществу.</p>

        <CommentForm />
        <CommentList postId={id} />
      </div>


    </div>
  ), node);
}```
>и форма внутри: 

import React, { ChangeEvent, FormEvent, useContext, useEffect, useRef, useState } from 'react';
import { useUserData } from '../../hooks/useUserData';
import { commentContext } from '../context/commentContext';
import styles from './commentform.css';


export function CommentForm() {
  const { value, onChange } = useContext(commentContext)
  const data = useUserData();
  const [placeholder, setPlaceholder] = useState('');
  const ref = useRef<HTMLTextAreaElement>(null);

  useEffect(() => {
    setPlaceholder(
      `${!!data[0].name ? data[0].name : "Аноним"}`
    );
  }, [data[0].name])

  // const [value, setValue] = useState('')
  useEffect(() => {
    ref.current?.focus();
  }, []);

  function handleChange(event: ChangeEvent<HTMLTextAreaElement>) {
    onChange(event.target.value);
  }

  function handleSubmit(e: FormEvent) {
    e.preventDefault();
    console.log(value);
  }

  return (
    <form className={styles.form} onSubmit={handleSubmit} >
      <div className={styles.labelInTextarea}>
        <textarea
          name="addresstext"
          id="addresstext"
          className={styles.input}
          value={value}
          onChange={handleChange}
          placeholder={" "}
          ref={ref}
          required
        >
        </textarea>
        <label htmlFor="addresstext" className={styles.label}>
          <span className={styles.labelSpan} >{`${placeholder}, `}</span>оставьте ваш комментарий
        </label>
      </div>


      <button type="submit" className={styles.button}>Комментировать</button>
    </form>
  );

}```