React: Contextでレンダリングを減らしたい。

ReactのContextを利用しているんですが、なぜかレンダリング回数が減らせません。レンダリング回数を減らすために、参照系と更新系を分けてProviderを作成しました。valueに値を渡すところで、value={{ hoge }}の形で渡すと、2つのコンポーネント両方でレンダリングが発生します。
value={ hoge }の形だと、Countコンポーネントのみがレンダリングされて期待した動作が確認できました。
なぜ、前者の書き方だとレンダリングが両方で発生するのでしょうか？

import React, { createContext, useContext, useReducer } from "react";

const CountStateContext = createContext<any>({});
const CountDispatchContext = createContext<any>({});

function CountProvider({ children }: { children: any }) {
  const [state, dispatch] = useReducer(countReducer, { count: 0 });

  return (
    <CountStateContext.Provider value={{ state }}>
      <CountDispatchContext.Provider value={{ dispatch }}>
        {children}
      </CountDispatchContext.Provider>
    </CountStateContext.Provider>
  );
}

function Count() {
  console.log("render Count");
  const { state } = useContext(CountStateContext);

  return <h1>{state.count}</h1>;
}

function Counter() {
  console.log("render Counter");
  const { dispatch } = useContext(CountDispatchContext);

  return (
    <>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
    </>
  );
}

export default function App() {
  return (
    <CountProvider>
      <Count />
      <Counter />
    </CountProvider>
  );
}