每当我使用上下文和useReducer对存储在本地存储中的数组中的对象调度搜索操作时，它都会返回该对象，但当我从输入框中删除搜索查询时，列表不会返回，页面是空白的，请问有人能帮忙吗？

这是我的背景：

const NotesContext = createContext(null);
const NotesDispatchContext = createContext(null);

const getStoredNotes = (initialNotes = InitialNotes) => {
  return JSON.parse(localStorage.getItem("storedNotes")) || initialNotes;
};

export const NotesProvider = ({ children }) => {
  const [NOTES, dispatch] = useReducer(NotesReducer, getStoredNotes());
  useEffect(() => {
    localStorage.setItem("storedNotes", JSON.stringify(NOTES));
  }, [NOTES]);

  return (
    <NotesContext.Provider value={NOTES}>
      <NotesDispatchContext.Provider value={dispatch}>
        {children}
      </NotesDispatchContext.Provider>
    </NotesContext.Provider>
  );
};

export const useNotesContext = () => {
  return useContext(NotesContext);
};
export const useNotesDispatchContext = () => {
  return useContext(NotesDispatchContext);
};

const App = () => {
  const [query, setQuery] = useState("");
  const dispatch = useNotesDispatchContext();

  useEffect(() => {
    if (query.length !== 0) {
      dispatch({
        type: "searchNotes",
        query: query,
      });
    }
  }, [query]);
  return (
    <div className="container">
      <header>
        <Title title={"Notes"} className={"app_title"} />
        <form className="search_container">
          <span class="material-symbols-outlined">search</span>
          <input
            type="search"
            placeholder="search notes"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
          />
        </form>
      </header>

这是我的减速器功能

case "searchNotes": {
      [...NOTES].filter((note) =>
        note.title.toLowerCase().includes(action.query)
      );
    }

该函数实际上似乎是从本地存储中删除所有数据，而不是根据查询字符串进行过滤。