Re-render List after deleting item in child component

I want to build a dashboard for a blog. I have a page, listing all blog posts using a component for each list item. Now, inside each list item, I have a button to delete the post.
So far, everything is working. The post gets deleted, and if I reload the page, it is gone from the list. But I can’t get it to re-render the page automatically, after deleting a post. I kind of cheated here using window.location.reload() but there has to be a better way?

This is my Page to build the list of all Posts

import {
  CCol,
  CContainer,
  CRow,
  CTable,
  CTableHead,
  CTableRow,
  CTableHeaderCell,
  CTableBody,
} from "@coreui/react";
import { useState, useEffect } from "react";
import DashboardSidebar from "../../components/dashboard/Sidebar";
import { getAllBlogPosts } from "../../services/blogService";
import BlogListItem from "../../components/dashboard/blog/BlogListItem";
import "./Dashboard.scss";

const AdminBlogListView = () => {
  const [blogposts, setBlogposts] = useState([]);

  useEffect(() => {
    getBlogPosts();
  }, []);

  async function getBlogPosts() {
    const response = await getAllBlogPosts();
    setBlogposts(response.data);
  }
  // console.log(blogposts);
  return (
    <div className="adminContainer">
      <div className="adminSidebar">
        <DashboardSidebar />
      </div>
      <div className="adminContent">
        <CContainer fluid>
          <CRow className="mb-3">
            <CCol>
              <CTable>
                <CTableHead>
                  <CTableRow>
                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
                    <CTableHeaderCell scope="col">Titel</CTableHeaderCell>
                    <CTableHeaderCell scope="col">Content</CTableHeaderCell>
                    <CTableHeaderCell scope="col"></CTableHeaderCell>
                  </CTableRow>
                </CTableHead>
                <CTableBody>
                  {blogposts.map((post) => {
                    return <BlogListItem key={post._id} post={post} />;
                  })}
                </CTableBody>
              </CTable>
            </CCol>
          </CRow>
        </CContainer>
      </div>
    </div>
  );
};

export default AdminBlogListView;

And this is the BlogListItem Component

import { useState, useEffect } from "react";
import {
  CTableRow,
  CTableHeaderCell,
  CTableDataCell,
} from "@coreui/react";
import CIcon from "@coreui/icons-react";
import * as icon from "@coreui/icons";
import {
  deleteBlogPost,
  getBlogPostById,
  // updateBlogPost,
} from "../../../services/blogService";
import { useNavigate } from "react-router-dom";

const BlogListItem = (props) => {
  const id = props.post._id;
  const [visible, setVisible] = useState(false);
  const [post, setPost] = useState({
    title: "",
    content: "",
  });

  useEffect(() => {
    getBlogPostById(id)
      .then((response) => setPost(response.data))
      .catch((error) => console.log(error));
  }, []);

  const handleDelete = async (event) => {
    event.preventDefault();
    const choice = window.confirm("Are you sure you want to delete this post?");
    if (!choice) return;
    await deleteBlogPost(post._id);
    window.location.reload();
  };

  return (
    <>
      <CTableRow>
        <CTableHeaderCell scope="row">1</CTableHeaderCell>
        <CTableDataCell>{post.title}</CTableDataCell>
        <CTableDataCell>{post.content}</CTableDataCell>
        <CTableDataCell>
          <CIcon
            icon={icon.cilPencil}
            size="lg"
            onClick={() => setVisible(!visible)}
          />
          <CIcon
            icon={icon.cilTrash}
            className="deleteButton"
            size="lg"
            color=""
            onClick={handleDelete}
          />
        </CTableDataCell>
      </CTableRow>
    </>
  );
};

export default BlogListItem;

What can I do instead of window.location.reload() to render the AdminBlogListView after deleting an item? I tried using useNavigate() but that doesn’t do anything

Thanks in advance 🙂