DiaryItem

import { useState, useRef } from "react";

const DiaryItem = ({
  author,
  emotion,
  created_time,
  content,
  id,
  onDelete,
  onEdit,
}) => {
  const [isEdit, setIsEdit] = useState(false);
  const [localContent, setLocalContent] = useState(content); // 본문 수정 시 수정 전 콘텐츠 띄우기
  const localContentInput = useRef();

  const toggleIsEdit = () => {
    setIsEdit(!isEdit);
  };

  const handleDelete = () => {
    if (window.confirm(`${id}번째 일기를 삭제하시겠습니까?`)) {
      onDelete(id);
    }
  };

  const handleQuitEdit = () => {
    setIsEdit(false);
    setLocalContent(content);
  };

  const handleEdit = () => {
    if (localContent.length < 5) {
      localContentInput.current.focus();
      return;
    }

    onEdit(id, localContent);
  };

  return (
    <div className="DiaryItem">
      <div className="info">
        <span>
          작성자 : {author} | 감정점수 : {emotion}
        </span>
        <br />
        <span className="date">{new Date(created_time).toLocaleString()}</span>
      </div>
      <div className="content">
        {/* 수정 중 콘텐츠 vs 수정 전 콘텐츠 */}
        {isEdit ? (
          <textArea
            ref={localContentInput}
            value={localContent}
            onChange={(e) => setLocalContent(e.target.value)}
          />
        ) : (
          <>{content}</>
        )}
      </div>
      {/* 수정 중 버튼 vs 수정 전 버튼 */}
      {isEdit ? (
        <>
          <button onClick={handleQuitEdit}>수정 취소</button>
          <button onClick={handleEdit}>수정 완료</button>
        </>
      ) : (
        <>
          <button onClick={handleDelete}>삭제하기</button>
          <button onClick={toggleIsEdit}>수정하기</button>
        </>
      )}
    </div>
  );
};

export default DiaryItem;

위는 제가 수업을 보며 따라친 DiaryItem.js인데 실행을 시키면 수정하기 버튼을 눌렀을 때 원래 콘텐츠가 textArea에 뜨지 않고 수정이 되지 않습니다. 하지만 소스코드에 올려진 DiaryItem.js를 복붙했을 때는 또 됩니다. 몇 번이나 두 파일을 비교했지만 잘못된 점을 찾아낼 수가 없었는데 도와주세요 ㅠㅠ