배열에 객체 추가 관련 질문

[냥냥냥]

안녕하세요..! 리액트 강의 들은 후에 혼자 리액트로 sns 만드는 중입니다.
댓글 달기 기능을 구현 하려고 하는데, 문제가 있어서 질문드려요

유저 data는 제가 직접 json파일로 작성해서 프로젝트 폴더에 넣어 사용했고,
input에 댓글내용을 쓴 후, 버튼을 누르면 
json 배열에 댓글내용을 객체로 추가하도록 만들었습니다.
그런데 댓글이 한번만 추가되고 2번이상은 추가가 안됩니다..

아래는 댓글달기 기능 구현하는 코드입니다.

function Feeds(props) {
....
  let [댓글, 댓글수정] = useState(props.코멘트);
  let [입력값, 입력값변경] = useState('');
....
  useEffect(() => {
    댓글수정(props.코멘트);
  },[props.코멘트]);

  return(
    <div>
      <div className="feeds">
........

          {/* 댓글 달기 */}
          <div className="post">
            <FontAwesomeIcon icon={faFaceSmile} className="commentsIcon"/>

            <input type="text" placeholder="댓글 달기..."
            onChange={(e) => {
              입력값변경(e.target.value) }}/>

            <button onClick={ () =>{
              댓글.push( { "id": (댓글.length+1) , "유저id" : "developer",
              "comment" : 입력값 } );
              댓글수정( JSON.stringify(댓글) );
              }}>게시</button>
          </div>
....




json파일은 이런식으로 작성했습니다.
[
    {
      "id" : 1,
      "userId" : "react", 
      "content" : "피드내용",
      "comments" : [{
          "id" : 1,
          "유저id" : "heheheh",
          "comment" : "안녕"
        },{
          "id" : 2,
          "유저id" : "hihihi",
          "comment" : "하이하이"
        }]
    },
        {
      "id" : 2,
      "userId" : "react2", 
      "content" : "피드내용2",
      "comments" : [{
          "id" : 1,
          "유저id" : "heheheh2",
          "comment" : "안녕"
        },{
          "id" : 2,
          "유저id" : "hihihi2",
          "comment" : "하이하이"
        }]
    },

.....
]

처음에 댓글달 때는 괜찮은데 두번째 댓글을 달려고 하면
버튼을 눌렀을 때, 댓글.push is not a function이라는 에러가 뜰 때도 있습니다.
나름 오랫동안 고민해봤는데 댓글을 여러번 달 수 있도록 하려면 어떻게 해야할지 모르겠습니다ㅠㅠ

[codingapple]

댓글state 바뀔 때마다 props.코멘트로 댓글state를 바꾸라고 코드짜놔서 그런듯요 
props는 state에 넣어서 쓰면 안됩니다

[냥냥냥]

헉 그러네요 엄청 오랫동안 고민했는데 바보같이;; 감사합니다..

[글쓴이]

글