How to perform search operation from Navbar when data is recieved from global Context API

Question

I am executing search operation from Navbar component for the data that is present in separate Context API, and the results for the search operation will be presented in another component call Blog, which is using same Context API, but the problem here is search operation is not executing in real time, like when I clear the search bar then It's difficult to set search term in use state hook which is present in context API. So in this case how to solve the problem.

Below is my code from context API

import { BlogContext } from "./BlogContext";
import React from "react";
import { useState } from "react";

export const BlogState = (props) => {
  const host = "http://localhost:5000";
  const blogInitial = [];
  const [blog, setBlog] = useState(blogInitial);

  let fetchAllNotes = async () => {
    //API call
    const response = await fetch(`${host}/api/notes/blog/`, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
    });
    const json = await response.json();
    setBlog(json);
  };

  const searchFilter = (searchWord) => {
    const searchTerm =
      blog.filter((note) =>
        note.description.toLowerCase().includes(searchWord)
      ) || ((note) => note.title.toLowerCase().includes(searchWord));
    setBlog(searchTerm);
  };

  return (
    <BlogContext.Provider value={{ blog, fetchAllNotes, fil, searchFilter }}>
      {props.children}
    </BlogContext.Provider>
  );
};

---

Code from Navbar component

import React, { useContext, useState } from "react";
import { Link, useNavigate, useLocation } from "react-router-dom";
import { ThemeContext } from "../context/notes/ThemeContext";
import { BlogContext } from "../context/notes/BlogContext";

export const Navbar = () => {

  const { searchFilter, blog } = useContext(BlogContext);
  const [searchTerm, setSearchTerm] = useState(blog);

  const onChange = (e) => {
    if (e.target.value === "") {
      window.location.reload(true);
    } else {
      const search = e.target.value.toLowerCase();
      setSearchTerm(search);
      searchFilter(searchTerm);
    }
  };

  return (
    <div>
       
      <nav
                <form className="d-flex mx-2">
                  <input
                    onChange={onChange}
                    className="form-control me-2"
                    type="search"
                    placeholder="Search"
                    aria-label="Search"
                  />
                  <button className="btn btn-success mx-2" type="submit">Clear</button>
                </form>
       
         </nav>
</div>
  );
};

---

Code from Blog component

import React, { useContext, useEffect } from "react";
import { ThemeContext } from "../context/notes/ThemeContext";
import { BlogContext } from "../context/notes/BlogContext";
import BlogItem from "./BlogItem";
import { FlexNavbar } from "./FlexNavbar";

const Blog = () => {
  const { theme } = useContext(ThemeContext);
  const { blog } = useContext(BlogContext);
  
  return (
    <>
      <div
        className={`container bg-${theme} text-${
          theme === "dark" ? "light" : "dark"
        }`}
      >
        <FlexNavbar className="" />
        <div className="row">
          {blog.map((notes) => {
            return <BlogItem key={notes._id} note={notes} />;
          })}
        </div>
      </div>
    </>
  );
};

export default Blog;