La función handleDeleteItem siempre elimina el último elemento de la matriz, no sé por qué, y quiero eliminar el componente específico en el que hice clic en el botón

 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> ); }