비로그인 상태에서 댓글 입력하면 댓글폼 개수만큼 alert가 발생합니다!

import React, { useCallback, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Form, Input, Button } from 'antd';
import { useDispatch, useSelector } from 'react-redux';

import useInput from '../hooks/useInput';
import { ADD_COMMENT_REQUEST, ADD_COMMENT_RESET } from '../reducers/post';

const CommentForm = ({ post }) => {
  const dispatch = useDispatch();
  const { addCommentDone, addCommentLoading, addCommentError } = useSelector((state) => state.post);
  const [commentText, onChangeCommentText, setCommentText] = useInput('');

  useEffect(() => {
    if (addCommentDone) {
      setCommentText('');
    }
  }, [addCommentDone]);

  useEffect(() => {
    if (addCommentError) {
      alert(addCommentError);
      dispatch({ type: ADD_COMMENT_RESET });
    }
  }, [addCommentError]);

  const onSubmitComment = useCallback(() => {
    dispatch({
      type: ADD_COMMENT_REQUEST,
      data: { content: commentText, postId: post.id },
    });
  }, [commentText]);

  return (
    <Form onFinish={onSubmitComment}>
      <Form.Item style={{ position: 'relative', margin: 0 }}>
        <Input.TextArea value={commentText} onChange={onChangeCommentText} rows={4} />
        <Button
          style={{ position: 'absolute', right: 0, bottom: -40, zIndex: 1 }}
          type="primary"
          htmlType="submit"
          loading={addCommentLoading}ß
        >
          댓글 입력
        </Button>
      </Form.Item>
    </Form>
  );
};

CommentForm.propTypes = {
  post: PropTypes.object.isRequired,
};

export default CommentForm;

위 코드는 CommentForm 컴포넌트인데 비로그인 상태에서 댓글 입력 버튼을 클릭하면 ADD_COMMENT_FAILURE 액션이 실행되고

alert(addCommentError)를 알람 설정했습니다! 근데 이때 댓글폼을 세 개 열어 놓고 댓글 입력 버튼을 클릭하면 세 번 알람이 되더라구요..ㅠㅠㅠ 혹시 한 번만 알람되도록 설정하는 방법이 있을까하고 여쭤봅니다...ㅠ
ADD_COMMENT_RESET은 그냥 addCommentError: false로 바꿔주는 것 말고는 없습니다.

그리고 이번에 라이브러리 최신화한 것 감사합니다! 강의 내용은 아니지만 다름이 아니라 intersection 폴더에서 컴포넌트들 화살표 함수에서 함수 선언식으로 바꾸셨던데 이유가 있을까요??