I'm testing the use-context-selector lib to prevent unnecessary rendering in react ContextApi. I create this simple application:

export const HomeProvider = (props: PropsWithChildren<{}>) => {
  const [x, setX] = React.useState(0);

  const [y, setY] = React.useState(0);

  return (
    <HomeContext.Provider value={{ x, setX, y, setY }}>
      {props.children}
    </HomeContext.Provider>
  );
};

export const HomeModule = () => {
  return (
    <HomeProvider>
      <CounterScreen></CounterScreen>
      <br />
      <br />
      <MessageScreen></MessageScreen>
    </HomeProvider>
  );
};

The child components are:

export const MessageScreen = () => {
  const x = useContextSelector(HomeContext, (context) => context.x);

  const setX = useContextSelector(HomeContext, (context) => context.setX);

  return (
    <>
      <h1>Teste X</h1>
      {x} <button onClick={() => setX(x + 1)}>X</button>
    </>
  );
};

export const MessageScreen = () => {
  const x = useContextSelector(HomeContext, (context) => context.x);

  const setX = useContextSelector(HomeContext, (context) => context.setX);

  return (
    <>
      <h1>Teste Y</h1>
      {y} <button onClick={() => setY(y + 1)}>X</button>
    </>
  );
};

The result, when I click in any one of those button is that indeed the child components doesn't rerender:

https://i.stack.imgur.com/9adCh.png

But, when I use the option: Highlight updates when components render in settings, all components on the screen is highlighted.

So, am i missing something or i'm right about the child components not rerendering ?? I saw other videos on youtube that show that when using this lib, the component that didn't render was not highlighted.