Cada vez que agrego o elimino un componente, la página completa se vuelve a cargar, ¿cómo lo evito? Cuando uso HandleClick o handleRemoveItem, la página se restablece y sus componentes.

 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 key={uuid()} click={handleRemoveItem} /> )); return ( <DefaultLayout click={handleClick}> <Wrapper>{MappedArray}</Wrapper> </DefaultLayout> ); }