도와주세요 선생님 접기 닫기 에니메이션 질문

코드가 좀 길어요! ( 개인적으로 질문 게시판에 코드블럭 만들수있는거 하나 기능 추가로좀 ㅠ-ㅠ)

탭을 누르면 서브메뉴가 펼쳐지듯이 열리고  닫으면  접히듯이 닫히는 애니에미션 구현인데요
근데 지금 코드는 close 클래스명이 적용되버려서 close애니메이션이 적용되버리다보니깐 
서브메뉴가 열려있던게 닫혀버려요.

제가원하는것은 처음엔 닫혀있다가 누르면 펼쳐지는애니메이션과 다시 누르면 닫혀지는 애니메이션이 구현되는거에요.

먼저 키프레임은 이렇습니다.
const OpenAnimation = keyframes`
  from {
    height: 0;
    opacity: 0;
    visibility: hidden;
  }
  to {
    height: 684px;
    opacity: 1;
    visibility: visible;
  }
`;
const CloseAnimation = keyframes`
  from {
    height: 684px;
    opacity: 1;
    visibility: visible;
  }
  to {
    height: 0;
    opacity: 0;
    visibility: hidden;
  }
`;
 
애니메이션 값들을보니까 제가 앞에서
근데 지금 코드는 close 클래스명이 적용되버려서 close애니메이션이 적용되버리다보니깐 
서브메뉴가 열려있던게 닫혀버려요.
라고했던 이유가 짐작이 가시겠죠!? .. 
hegiht 값이 684px로 되었다가 0으로 되어서 초기에 펼쳐졌다가 접히는 애니메이션이 한번 발동하게됩니다.

코드는 아래처럼 짜여져있어요.

const News = () => {
  const [showSubItem, setShowSubItem] = useState<number[]>([]);

  const onItemClick = (itemId: number) => {
    setShowSubItem((prevItems) => {
      const index = prevItems.indexOf(itemId);
      if (index !== -1) {
        // 이미 열린 아이템을 클릭한 경우, 해당 아이템을 닫기 위해 배열에서 제거
        return [...prevItems.slice(0, index), ...prevItems.slice(index + 1)];
      } else {
        // 클릭한 아이템이 닫힌 상태이므로 배열에 추가하여 열기
        return [...prevItems, itemId];
      }
    });
  };

  return (
    <Component>
      <Banner />
      <Wrapper>
        <Logo>
          <span>plant.</span> news
        </Logo>

        <NewsWrapper>
          <NewsSearch>
            <select>
              <option value='title'>제목</option>
              <option value='contents'>내용</option>
              <option value='title+contents'>제목+내용</option>
            </select>
            &nbsp;
            <input type='text' />
            <button>검색</button>
          </NewsSearch>
          <List>
            {testData.map((item) => (
              <Item onClick={() => onItemClick(item.id)} key={item.id}>
                <p className='title'>{item.title}</p>
                <SubItem
                  className={showSubItem.includes(item.id) ? 'open' : 'close'}
                >
                  <p className='title'>{item.title}</p>
                  < img src={item.url} alt='' />
                </SubItem>
              </Item>
            ))}
          </List>
        </NewsWrapper>
      </Wrapper>
    </Component>
  );
};

알맞게 수행하게하려면 어떤식으로 해줘야할까요?..