The function handleDeleteItem always deletes the last item from the array, I don't know why, and I want to delete the specific component that I clicked the button

export default function Home() {
  const [PostArray, setPostArray] = useState<React.ReactNode[]>([]);

  let component = <PostSheet />;

  function handleClick(event: React.MouseEvent<HTMLButtonElement>) {
    event.preventDefault();
    if (PostArray.length < 8) {
      setPostArray((OldArray: any) => [...OldArray, component]);
    }
  }

  const handleRemoveItem = useCallback(
    (todo: any) => {
      let newPostArray = [...PostArray];
      newPostArray.splice(PostArray.indexOf(todo), 1);
      setPostArray(newPostArray);
    },
    [PostArray]
  );
  const MappedArray = PostArray.map((e) => (
    <PostSheet click={handleRemoveItem} />
  ));

  return (
    <DefaultLayout click={handleClick}>
      <Wrapper>{MappedArray}</Wrapper>
    </DefaultLayout>
  );
}