Custom component not rendering Mui Select + Menu Items

App Building
1

Hello! I'm trying to build a custom component that requires a few selects, however it's not rendering at all.

model:
{
"displayText": "Add a new Location",
DestinationLSP: "",
"DestinationLocations": [],
"locData": {{stage_loc_ids.data}}
}

code:

  body {
    margin: 0;
  }
</style>
<script src="https://cdn.tryretool.com/js/react.production.min.js" crossorigin></script>
<script src="https://cdn.tryretool.com/js/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/@material-ui/core@3.9.3/umd/material-ui.production.min.js"></script>


<div id="react"></div>

<script type="text/babel">
  const { 
    			Button, 
         	        Card, 
         	        CardContent,
     			Input,
    			Select,
                        MenuItem
  } = window["material-ui"];

const CreateForm = (index) => {
	return (
      <Select
        id="select_addition_lsp"
        value={model.DestinationLocations[index]?.DestLocId}
        label="DestLocId"
        onChange= { ({target}) =>
          modelUpdate({ DestinationLocations[index]?.DestLocId: target?.value})
        }
      >
        {model.locData?.map((item) => (
          <MenuItem value={item?.LOC_ID}>{item?.LOC_NAME}</MenuItem>
        ))}
      </Select>
  )
}

  const MyCustomComponent = ({ triggerQuery, model, modelUpdate }) => (
    <Card>
      <CardContent>
        <div>{model.displayText}</div>
         {
           model.DestinationLocations?.length ? 
           model.DestinationLocations?.map((value, index) => CreateForm(index)}) :
           CreateForm(0)}
      </CardContent>
    </Card>
  );

  const ConnectedComponent = Retool.connectReactComponent(MyCustomComponent);
  ReactDOM.render(<ConnectedComponent />, document.getElementById("react"));
</script>
2

Hey Heather! Custom Components are so customizable and unique that debugging gets a bit tricky. I did notice a few things:

  1. In order to reference the model (like you're doing in your value field in your CreateForm function), you'll need to subscribe to the model first! https://docs.retool.com/apps/web/guides/components/custom#connect-interface-for-non-react-components
  2. If the component is a newer component (newer than material UI 3.9), you would need the updated version. Newer versions of the material ui library would potentially require newer versions of React in order to work properly. Are you following a particular material ui doc for this Select component?