Cannot update a component (NetworkPanel) while rendering a different component (EntriesBody). To locate the bad setState() call inside EntriesBody

[AlucardYang]

Warning: Cannot update a component (NetworkPanel) while rendering a different component (EntriesBody). To locate the bad setState() call inside EntriesBody, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
at EntriesBody (http://127.0.0.1:5173/src/pages/Devtools/NetworkPanel/comps.tsx?t=1691819893678:27:3)
at div
at div
at div
at div
at div
at div
at NetworkPanel (http://127.0.0.1:5173/src/pages/Devtools/NetworkPanel/index.tsx?t=1691819893678:38:7)
at div
at main
at http://127.0.0.1:5173/node_modules/.vite/deps/antd.js?v=9c5f9485:17593:16
at Content
at section
at http://127.0.0.1:5173/node_modules/.vite/deps/antd.js?v=9c5f9485:17612:16
at Layout
at Devtools (http://127.0.0.1:5173/src/pages/Devtools/index.tsx?t=1691819893678:410:7)
at RenderedRoute (http://127.0.0.1:5173/node_modules/.vite/deps/react-router-dom.js?v=9c5f9485:3135:5)
at Outlet (http://127.0.0.1:5173/node_modules/.vite/deps/react-router-dom.js?v=9c5f9485:3484:26)
at Suspense
at main
at http://127.0.0.1:5173/node_modules/.vite/deps/antd.js?v=9c5f9485:17593:16
at Content
at section
at http://127.0.0.1:5173/node_modules/.vite/deps/antd.js?v=9c5f9485:17612:16
at Layout
at Layouts (http://127.0.0.1:5173/src/pages/Layouts/index.tsx:38:18)
at RenderedRoute (http://127.0.0.1:5173/node_modules/.vite/deps/react-router-dom.js?v=9c5f9485:3135:5)
at RouteConfig (http://127.0.0.1:5173/src/routes/config.tsx?t=1691819893678:80:24)
at LocaleProvider (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-OJGTIG3G.js?v=9c5f9485:5020:5)
at MotionWrapper (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-OJGTIG3G.js?v=9c5f9485:7117:5)
at ProviderChildren (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-OJGTIG3G.js?v=9c5f9485:7214:5)
at ConfigProvider (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-OJGTIG3G.js?v=9c5f9485:7339:27)
at ErrorBoundary (http://127.0.0.1:5173/src/components/ErrorBoundary/index.tsx:124:5)
at Router (http://127.0.0.1:5173/node_modules/.vite/deps/react-router-dom.js?v=9c5f9485:3491:15)
at BrowserRouter (http://127.0.0.1:5173/node_modules/.vite/deps/react-router-dom.js?v=9c5f9485:3940:5)
at App (http://127.0.0.1:5173/src/App.tsx?t=1691819893678:30:18)
overrideMethod @ console.js:213
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
warnAboutRenderPhaseUpdatesInDEV @ react-dom.development.js:27492
scheduleUpdateOnFiber @ react-dom.development.js:25498
dispatchSetState @ react-dom.development.js:17527
listener @ index.tsx:56
EntriesBody @ comps.tsx:22
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
flushSyncCallbacksOnlyInLegacyMode @ react-dom.development.js:12021
scheduleUpdateOnFiber @ react-dom.development.js:25541
dispatchSetState @ react-dom.development.js:17527
listener @ index.tsx:54
Show 18 more frames
Show less

[AlucardYang]

export const EntriesBody: FC<{ data: [string, string][] }> = ({ data }) => {
  return (
    <div className="entries-body">
      {data.map(([label, value]) => {
        return (
          <div className="entries-item" key={label + value}>
            <b className="entries-item__label">{label}: &nbsp;</b>
            <span className="entries-item__value">
                <code>{value}</code>
            </span>
          </div>
        );
      })}
    </div>
  );
};