bounty还有3天到期。回答此问题可获得+50声望奖励。Paul正在寻找典型答案。

项目描述：我有一个网站，其中每个页面上都有一个带有过滤器的侧边栏（一个小原型，以便您了解其本质，在此链接https://codesandbox.io/s/dank-cherry-zl553c）。
实施：我创建了一个FiltersContextWrapper并将其放在App.js中。要记住过滤器的状态（边栏是否打开，过滤器本身是否打开，以及过滤器值本身）在网站的任何页面上。
问题：当我开始深入研究时，我意识到，在上下文中传递函数是非常糟糕的做法。从上下文使用函数会使代码变得不可预测。我需要存储过滤器的状态并使用它，而不是从外部更改组件状态。
也就是说：我隐藏了上下文中数据更改所基于的所有操作。几乎不可能跟踪数据将从何处更改。一般来说，功能不应该位于状态管理器中，包括上下文。实际上，在状态管理器中，我需要存储过滤器本身的状态，并使用将绑定到相应存储的函数更改它们。
我相信一个很好的图书馆是反冲。我想问一下社区我怎样才能把我的代码翻译到这个库中
所有的代码都来自我上面粘贴的链接。这里（因为这是stackoverflow规则所要求的）我将给出代码FiltersContextWrapper

export default function FiltersContextWrapper({ children }) {
  const [hideSidebar, setHideSidebar] = useState(true);

  const [filterRequestURLOpen, setFilterRequestURLOpen] = useState(false);
  const [filterDateTimeOpen, setFilterDateTimeOpen] = useState(false);

  const start = moment("2023-01-01").set({ hour: "00", minute: "00" });
  const end = moment(moment().startOf("day"))
    .add(1, "days")
    .subtract(1, "seconds");
  const [time, setTime] = useState({ start, end });
  const resetDate = () => {
    setTime({
      start,
      end
    });
  };

  const resetAll = () => {
    setTime({
      start,
      end
    });
  };

  return (
    <filtersContext.Provider
      value={{
        hideSidebar,
        setHideSidebar,
        filterRequestURLOpen,
        setFilterRequestURLOpen,
        filterDateTimeOpen,
        setFilterDateTimeOpen,
        time,
        setTime,
        resetDate,
        resetAll
      }}
    >
      {children}
    </filtersContext.Provider>
  );
}

export const filtersContext = createContext({
  hideSidebar: false,
  setHideSidebar: () => {},
  filterRequestURLOpen: false,
  setFilterRequestURLOpen: () => {},
  filterDateTimeOpen: false,
  setFilterDateTimeOpen: () => {},
  time: false,
  setTime: () => {},
  resetDate: () => {},
  resetAll: () => {}
});