Uncaught TypeError: Cannot read properties of undefined (reading '0')

Hi, I downloaded my selection.json and inserted it correctly in path, there is a “pencil” named icon in it. So I used <Icon icon="pencil" size={20} color="orange" /> and got this:

index.tsx:82 Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at index.tsx:82:1
    at Array.map (<anonymous>)
    at IcoMoon (index.tsx:81:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at mountIndeterminateComponent (react-dom.development.js:17811:1)
    at beginWork (react-dom.development.js:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22776:1)
    at workLoopSync (react-dom.development.js:22707:1)
    at renderRootSync (react-dom.development.js:22670:1)
    at performSyncWorkOnRoot (react-dom.development.js:22293:1)
    at react-dom.development.js:11327:1
    at unstable_runWithPriority (scheduler.development.js:468:1)
    at runWithPriority$1 (react-dom.development.js:11276:1)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322:1)
    at workLoop (scheduler.development.js:417:1)
    at flushWork (scheduler.development.js:390:1)

the above error occurred in the <IcoMoon> component:

    at IcoMoon (http://localhost:3000/static/js/2.chunk.js:16958:20)
    at Icon
    at form
    at ReactFinalForm (http://localhost:3000/static/js/3.chunk.js:1727:20)
    at div
    at http://localhost:3000/static/js/vendors~main.chunk.js:324789:73
    at Paper (http://localhost:3000/static/js/vendors~main.chunk.js:364808:86)
    at http://localhost:3000/static/js/vendors~main.chunk.js:324789:73
    at Card (http://localhost:3000/static/js/vendors~main.chunk.js:345325:86)
    at div
    at http://localhost:3000/static/js/vendors~main.chunk.js:324789:73
    at Grid (http://localhost:3000/static/js/vendors~main.chunk.js:353724:91)
    at div
    at http://localhost:3000/static/js/vendors~main.chunk.js:324789:73
    at Grid (http://localhost:3000/static/js/vendors~main.chunk.js:353724:91)
    at div
    at http://localhost:3000/static/js/vendors~main.chunk.js:324789:73
    at Container (http://localhost:3000/static/js/vendors~main.chunk.js:348606:86)
    at Datatable (http://localhost:3000/static/js/50.chunk.js:423:90)
    at Admin (http://localhost:3000/static/js/50.chunk.js:1787:52)
    at Suspense
    at B (http://localhost:3000/static/js/vendors~main.chunk.js:556649:10)
    at BaseLayout (http://localhost:3000/static/js/main.chunk.js:6268:5)
    at LocalizationProvider (http://localhost:3000/static/js/vendors~main.chunk.js:337110:5)
    at InnerThemeProvider (http://localhost:3000/static/js/vendors~main.chunk.js:397702:74)
    at ThemeProvider (http://localhost:3000/static/js/vendors~main.chunk.js:392324:5)
    at ThemeProvider (http://localhost:3000/static/js/vendors~main.chunk.js:397722:5)
    at StylesProvider (http://localhost:3000/static/js/vendors~main.chunk.js:394935:5)
    at ThemeProviderWrapper (http://localhost:3000/static/js/main.chunk.js:11166:92)
    at App (http://localhost:3000/static/js/main.chunk.js:124:85)
    at x (http://localhost:3000/static/js/vendors~main.chunk.js:556667:13)
    at w (http://localhost:3000/static/js/vendors~main.chunk.js:555238:13)
    at SidebarProvider (http://localhost:3000/static/js/main.chunk.js:1098:5)
    at r (http://localhost:3000/static/js/vendors~main.chunk.js:552458:19)

“react”: “17.0.2”, “react-scripts”: “4.0.3”

[aykutkardas]

Thanks @Simoneth. You can use react-icomoon@2.5.1 version. Problem solved.

[Simoneth]

Here we go:

{
  "IcoMoonType": "selection",
  "icons": [
    {
      "icon": {
        "paths": [
          "M864 0c88.364 0 160 71.634 160 160 0 36.020-11.91 69.258-32 96l-64 64-224-224 64-64c26.742-20.090 59.978-32 96-32zM64 736l-64 288 288-64 592-592-224-224-592 592zM715.578 363.578l-448 448-55.156-55.156 448-448 55.156 55.156z"
        ],
        "isMulticolor": false,
        "isMulticolor2": false,
        "tags": [
          "pencil"
        ],
        "defaultCode": 59656,
        "grid": 0
      },
      "properties": {
        "id": 9,
        "order": 84,
        "ligatures": "write, pencil",
        "prevSize": 32,
        "code": 59656,
        "name": "pencil"
      },
      "setIdx": 0,
      "setId": 3,
      "iconIdx": 8
    },
    // ...
  ],
  "height": 1024,
  "metadata": {
    "name": "icomoon"
  },
  "preferences": {
   // ...
  }
}

In the meantime I tried to load another set of icons, without imported custom icons like the above, and everything works fine.