Почему не работает «Why Did You Render»?

Question

[karpo518]

Нашёл пакет https://github.com/welldone-software/why-did-you-render, который хорошо помогает оптимизировать отрисовку компонентов react. Часто сталкиваюсь с тем, что на конкретном проекте пакет отказывается работать. Никаких ошибок не выводится, но и диагностическая информация не отображается. Попробовал запустить hello word в песочнице. Не работает! Помогите решить проблему. Ниже пример использования и ссылка на полный код.

App.jsx

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Test style={{ width: "100%" }} />
      <Test style={{ width: "50%" }} />
    </div>
  );
}

const Test = React.memo(({ style }) => {
  console.log("Test render");
  return <div style={style}>Test</div>;
});
Test.whyDidYouRender = true;

index.js

import "./wdyr"; // <--- first import

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

wdyr.js

import React from "react";

if (process.env.NODE_ENV === "development") {
  console.log("dev mode!!!");
  const whyDidYouRender = require("@welldone-software/why-did-you-render");
  whyDidYouRender(React, {
    trackAllPureComponents: true
  });
}

Полный код в пеcочнице https://codesandbox.io/s/strange-tom-5ntvn0