React memo creates rerender in next.js app

I’m having an issue with react memo when using nextjs. In the _app e.g. I have a button imported:

Import { ChildComponent } from './ChildComponent';
        
const Button = ({ classN }: { classN?: string }) => {
      const [counter, setCounter] = useState(1);    

      return (
          <StyledButton
            onClick={() => setCounter(counter + 1)}
          >
            {counter}
            <ChildComponent>
          </StyledButton>
        );
      };

Child component:

import React from 'react';

export const TestComponent = React.memo(
  () => {
    React.useEffect(() => {
      // eslint-disable-next-line no-console
      console.log('rerender child component');
    }, []);

    return <p>Prevent rerender</p>;
  },
  () => false
);

Tested in Nextjs and React but the Codesandbox for Nextjs is not working, so unfortunately I can’t share it (as in the framework won’t start). So here is the working one:
https://codesandbox.io/s/objective-goldwasser-83vb4?file=/src/App.js