react hooks 如何实现类似于中间件那样的调用？

// 希望实现如下的 useMiddleware 函数, 尝试了一下, 发现有点费劲
// 尝试性翻看 react-use, 果然有相似的实现: https://github.com/streamich/react-use/blob/master/docs/useMediatedState.md
// 感觉已经很合用了, 但是好像如下这样的调用方式, 更好看, 更灵活
// 见多识广的大佬能指点一下哪儿是否有类似的实现吗?
// 或者指出我这样调用的弊端?
// 如果实在没有, 可能就得参考 react-use, 硬着头皮自己写了
// 提前感谢大佬们
export function Foo() {
  const [number, setNumber] = useState(1)

  // 这儿能通过类似于中间件那样的语法链式调用, 扩展 setNumber 函数
  const newSetNumber = useMiddleware(setNumber).use((val) => val * 2).use((val) => val - 1).value

  return <button onClick={() => newSetNumber((val) => val + 5)}>
    {number}
  </button>
}