<List>
                        {instructionList.map((el) => (
                            <ListItem divider key={el.id}>
                                <Checkbox disableRipple />
                                <ListItemText>{el.instruction}</ListItemText>
                                <ListItemSecondaryAction>
                                    <IconButton onClick={() => deleteInstruction(el.id)}>
                                        <DeleteIcon />
                                    </IconButton>
                                </ListItemSecondaryAction>
                            </ListItem>
                        ))
                        }
                    </List>

I want to conditionally render a numbered bulletpoint list item or a checkbox based on whether el.type === 'number' or el.type === 'checkbox'. How do I do this?