https://github.com/houpjs/houp can help you implement this quickly.

Here is reproduce link

App

import React, { useEffect } from 'react';
import { useStore } from 'houp';
import Child from './Child';
import useMyHook from './myHook';

export default function App() {
  const { test } = useStore(useMyHook);

  useEffect(() => {
    console.log(2, 'in APP level, test is:', test);
  }, [test]);

  return (
    <>
      {/* expect 'test' to be reflected */}
      <p>test: {test.toString()}</p>

      <Child />
    </>
  );
}

Child

import React from 'react';
import { useStore } from 'houp';
import useMyHook from './myHook';

export default function Child() {
  const { test, change } = useStore(useMyHook);
  return (
    <>
      <p>I am child</p>
      <button
        onClick={() => {
          change(!test);
        }}
      >
        click to change
      </button>
    </>
  );
}