baskets.push할때

 안녕하세요. 강의를 진행하는데 서버가 죽은것같아 직접 배열을 만들어서 예제를 진행중입니다.

그런데 자꾸 문제가 생기네요,,

첫번째 클릭에서는 객체가 localStorage에 저장이 되는데 그 이후부터 진행이 안됩니다. 이유가 무엇일까요,,

이모션 부분은 제외하고 전달드립니다ㅜ

import styled from "@emotion/styled";
import { Modal } from "antd";

interface IBasketsProps {
  id: number;
  writer: string;
  product: string;
  price: number;
}

const myBasket = [
  { id: 100, writer: "짱구", product: "액션가면 인형", price: 30000 },
  { id: 200, writer: "철수", product: "과외", price: 40000 },
  { id: 300, writer: "훈이", product: "도시락", price: 50000 },
  { id: 400, writer: "맹구", product: "시냇물 돌", price: 2000000 },
];

export default function BasketHomework() {
  const onClickBtn = (basket: IBasketsProps) => () => {
    const baskets: IBasketsProps[] = JSON.parse(
      localStorage.getItem("baskets") ?? "[]"
    );
    console.log(baskets);

    const alreadyIn = baskets.filter((el) => el.id === basket.id);
    if (alreadyIn.length === 1) {
      Modal.warning({ content: "이미 찜한 상품입니다." });
      return;
    }

    baskets.push(basket);
    localStorage.setItem("baskets", JSON.stringify(basket));
  };
  return (
    <>
      <CardWrapper>
        {myBasket.map((el, index) => (
          <Card key={index}>
            <Product>{el.product}</Product>
            <Writer>{el.writer}</Writer>
            <Price>{el.price}</Price>
            <button onClick={onClickBtn(el)}>장바구니 담기</button>
          </Card>
        ))}
      </CardWrapper>
    </>
  );
}