Автоматически обновлять компонент при удалении элемента

Проблема

У меня есть код, который удаляет компонент. Это работает, но когда я нажимаю кнопку удаления, мне нужно перезагрузить браузер, чтобы увидеть, что он удален.

Есть ли способ сразу показать страницу без этого элемента? Я пробовал несколько вещей, но у меня ничего не получается. Является ли ререндер единственной душой??? Может быть, мне следует использовать управление состоянием, например, redux.

 const CardWithEdit = ({
  width,
  height,
  bckImg,
  color,
  children,
  link,
  editLink,
  id,
}) => {
  const [state, setState] = useState(false);
  const handleClick = () => setState(!state);

  const handleDelete = async () => {
    await fetch(`http://localhost:5000/api/v1/albums/${id}`, {
      method: "DELETE",
    });
    
    handleClick();
  };

  return (
    <Card width = {width} height = {height} bckImg = {bckImg}>
      <AlbumtTitle color = {color}>{children}</AlbumtTitle>
      <LinkButton background = {color} to = {link}>
        See more
      </LinkButton>
      <IconWrapper>
        <div>
          <Link to = {editLink}>
            <AiOutlineEdit />
          </Link>
        </div>
        <div onClick = {handleClick}>
          <AiOutlineDelete
            style = {{
              cursor: "pointer",
            }}
          />
        </div>
      </IconWrapper>
      {state && (
        <Dialog
          handleClick = {handleClick}
          handleDelete = {handleDelete}
          deleteText = {"Delete"}
        />
      )}
    </Card>
  );
};

И основной компонент Albums.js

import React from "react";
import Loader from "../components/Loader";
import CardWithEdit from "../components/Card/CardWithEdit";
import ErrorMessage from "../components/ErrorMessage";
import { CartWrapper } from "../components/Wrappers";
import { apiStates, useApi } from "../hooks/useApi";
const Albums = () => {
  const { state, error, data } = useApi("http://localhost:5000/api/v1/albums");

  const albums = data.data;
  switch (state) {
    case apiStates.ERROR:
      return <ErrorMessage>{error || "General error"}</ErrorMessage>;
    case apiStates.SUCCESS:
      return (
        <CartWrapper>
          {albums.length > 0 ? (
            albums.map((album) => (
              <CardWithEdit
                width = {"23rem"}
                height = "16rem"
                color = {album.color}
                bckImg = {album.bckImgUrl}
                key = {album._id}
                link = {`/albums/${album._id}`}
                editLink = {`edit/${album._id}`}
                id = {album._id}
              >
                {album.name}
              </CardWithEdit>
            ))
          ) : (
            <h1>No albums yet</h1>
          )}
        </CartWrapper>
      );
    default:
      return <Loader />;
  }
};

export default Albums;