material-ui-nested-menu-item | Drop-in replacement for MUI 's MenuItem | Frontend Framework library

I have a form that I used material ui and formik to implement it. Inside, I need to have a selection box, with nested options, it should look like this eventually. (Then I should get the value selected and submit form )

For simplicity: I only want recursive children items rendering from a json file:

I have a json file that is nested with children objects. Sample:

Im using the material-ui-nested-menu-item library: https://codesandbox.io/s/material-ui-nested-menu-item-example-b25j6

However I need to make a reusable component which you pass components to to be rendered. Ive succeeded in making a component that works with an array up to 2 levels: https://codesandbox.io/s/material-ui-nested-menu-item-example-izhvq?file=/src/App.tsx

However I need to make it work with infinite levels, so I'm attempting to make a recursive rendering function. Ive only got as far as creating a customRender (it's not recursive yet) however it renders nothing. https://codesandbox.io/s/material-ui-nested-menu-item-example-54q1k

I dont understand why this is happening as if I log out item.component I can see the text. Is this likely a qwerk of the library or am I going about things the wrong way?