context hook cant store value

Question

Code below works fine except when call Add function which adds new number to array, array contains only last added item.

dont understand why it does not store IDs

App.ts

import MyComponent from "./main";
import { FavoriteContext, usePostsContextValue } from "./store";

function App() {
  const postsContextValue = usePostsContextValue();
  return (
    <FavoriteContext.Provider value={postsContextValue}>
        <MyComponent />
      </Container>
    </FavoriteContext.Provider>
  );
}

export default App;

Component:

import { FavoriteContext } from "../store";
...

function MyComponent() {
  const [data, setData] = useState<certificates[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const [pageNumber, setPageNumber] = useState<number>(1);
  const { IDs, Add, Remove } = useContext(FavoriteContext);



  useEffect(() => {
    console.log("IDs", IDs); //logs only 1 item, last selected Id
  }, [IDs]);

  const handleAddClick= async (id: number) => {
    Add(id);
  };


  const columns: TableColumn<certificates>[] = useMemo(() => {
    return [
      {
        name: "STATUS",
        cell: (row) => <strong>{status(row.status)}</strong>,
      },
      {
        cell: (row) => {
          return (
            <IconButton onClick={() => handleAddClick(row.id)}>
              <BookmarkBorderIcon />
            </IconButton>
          );
        },
        button: true,
      },
    ];
  }, []);

  return (
    <DataTable
      columns={columns}
      data={data}
      pagination
      paginationServer
      paginationTotalRows={totalRows}
      onChangeRowsPerPage={handlePerRowsChange}
      onChangePage={handlePageChange}
    />
  );
}

export default MyComponent;

Context.ts:

import React, { useCallback, useMemo, useState } from "react";
import { favouriteType } from "../models";

export const defaultValue: favouriteType = {
  IDs: [],
  Add: (id: number) => {},
  Remove: (id: number) => {},
};
export const FavoriteContext = React.createContext<favouriteType>(defaultValue);

function usePostsContextValue(): favouriteType {
  const [IDs, setIDs] = useState<number[]>([]);

  const Add = (id: number) => {
    setIDs([...IDs, id]);
  };

  const Remove = (id: number) => {
    const newPosts = [...IDs];
    const removedPostIndex = newPosts.findIndex((f) => f === id);
    if (removedPostIndex > -1) {
      newPosts.splice(removedPostIndex, 1);
    }
    setIDs(newPosts);
  };

  return {
    IDs,
    Add,
    Remove,
  };
}

export { usePostsContextValue };