Почему у меня все клики срабатывают одновременно?

В компоненте есть кнопка, по нажатию на которую появляется комментарий

<button onClick={()=> {setCommentOpened(true)}} className={styles.comment}><div className={styles.comment__icon}><Icons value='Комментарии' /></div> Комментарий</button>
          {isCommentOpened && (
            <Comment onClose={()=>setCommentOpened(false)}/>
          ) }

В компоненте комментария есть useEffect в котором есть eventListener тоже на клик

useEffect(() => {
    function handleClick(event: MouseEvent) {
      event.stopPropagation();
      const node = event.target;
      if (event.target instanceof Node && event.target.textContent === ' Комментарий') 
      {props.onClose?.();
      console.log(event.target.textContent)}
    }
    document.addEventListener('click', handleClick)
    return () => {
      console.log('1')
      document.removeEventListener('click', handleClick)
    }
  }, [])

в консоль все время выходит "1", получается комментарий открывается и сразу закрывается. Не могу вообще понять, что с этим делать и как решить, причём у меня в любом подобном коде (при вложенных евентлисенерах) всё время клики срабатывают одновременно. Хотя функция передаётся по ссылке, всё равно срабатывает.