I’m making wish list in react js.

I want that when i clicked wish button about something goods, the goods is added on wish list by boolean data “liked: true”.

And i want that if i click one more when boolean data true, the goods is delete on wish list by boolean data “liked: false”

But now, when i clicked wish button, the liked data changed to true, but not added on wish list.

And, i clicked one more, but it didn’t changed to false.

How can i fix my code?

This is my code.

import { useParams } from "react-router-dom";
import axios from "axios";
import { useEffect, useState } from "react";
import "./goods.css";

const Goods  = (props) => {
  const [boards, setBoards] = useState({});
  const [images, setImages] = useState([]);
  const {id}  = useParams();
  const [isWishAdd, setIsWishAdd] = useState(false);
  const [wishCount, setWishCount] = useState(0); 

  const wishAddHandler = () => {
    setIsWishAdd(!isWishAdd);
  }

  const wishCountHandler = () => {
    wishAddHandler()
    if (!isWishAdd) {
      setWishCount(wishCount +1)
      fetch(`https://27.96.131.85:8443/api/likeBoards/${boards.id}`, {
        credentials: 'include',
        method: "POST",
        body: JSON.stringify({
         "liked": true
        }),
      })
      alert("찜 목록에 추가되었습니다.")
      console.log(boards)
      console.log("count+1")
    } else if (isWishAdd) {
      setWishCount(wishCount -1)
      fetch(`https://27.96.131.85:8443/api/likeBoards/${boards.id}`, {
        credentials: 'include',
        method: "DELETE",
        body: JSON.stringify({
          "liked": false
        })
      })
      alert("찜 목록에서 삭제되었습니다.")
      console.log(boards)
      console.log("count-1")
    }
  }    
  

  useEffect(() => {
    (async function () {
      const response = await axios.get(`https://27.96.131.85:8443/api/boards/${id}`, {
        withCredentials: true,
      });
      const boards = response.data;
      const images = boards.boardImages;
      console.log(response.data);

      // 게시글 정보 state에 저장
      setBoards(boards);
      setImages(images);

    })();
  }, []);

    return(
      <div id="goods">
        <p className="goodsTitle">상품 정보</p>
        <div className="images_container">
          {
            images.map((images) => {
              return (
                <img className="goodsImages"
                src={`https://27.96.131.85:8443/api/images/${images.id}`} />
              )
            })
          }
        </div>
       
        <div className="goodsContext">  
          <div className="goodsBoardTitle">
            {boards.title}
          </div>
          
          <div className="goodsName">
            상품 : {boards.goodsName}
          </div>

          <div className="goodsPrice">
            가격 : {boards.price} 원
          </div>

          <div className="goodsWriter">
            판매자 : {boards.writer}
          </div>
          
          <div className="goodsText">
          {boards.content}
          </div>

          <div className="goodsBtn">
            <span className="zzimBtn">
              <button class="btn btn-primary" type="submit" onClick={wishCountHandler}>찜 하기</button>
            </span>
            <button class="btn btn-primary" type="submit">판매자와 대화</button>
          </div>
        </div>
      </div>
    );
};

export default Goods;

This is api server

and this is my object data structure