React-admin: permissions not accessible in react.component

Question

I am using react-admin and have incorporated the advanced tutorial "Creating and Editing a Record From the List Page". This tutorial uses react.component instead of constants. I now need to display fields based of my values in the permissions object passed by authorization. I can do this fine in constants and in the admin component but permissions is always null if I try to access it in the react.component.

class InviteCodeList extends React.Component {
    render() {
        const { permissions,push, classes, ...props } = this.props;
        console.log('permissions');
        console.log(permissions);       
        return (
            <Fragment>
                <List
                    {...props}                    
                    filters={<CustomFilter />} 
                    actions={<CustomActions />}
                    sort={{ field: 'title', order: 'ASC' }}                    
                >
                    <Datagrid>
                        <TextField source="id" />
                        <TextField source="title" />
                        <WithPermissions
                            render={({ permissions }) => (
                                permissions.find(f => f.resource === 'admin') !== undefined
                                    ? <TextField source="invite_code" />
                                    : null
                            )}
                        />                        
                        <ReferenceField source="price_list_id" reference="pricelists">
                            <TextField source="price_list_name" />
                        </ReferenceField>
                        <TextField source="effective_dt" />
                        <DateField source="expiration_dt" />   
                        <EditButton />   
                    </Datagrid>
                </List>

Answer 1

Here is the new code segment. I did not check for null which is returned before the API call returns the actual data.

    <Fragment>
                    <List
                        {...props}                    
                        filters={<CustomFilter />} 
                        actions={<CustomActions />}
                        sort={{ field: 'title', order: 'ASC' }}                    
                    >
                        <Datagrid>
                            <TextField source="id" />
                            <TextField source="title" />                          
                            permissions !== null ? permissions.find(f => f.resource === 'admin') !== undefined
                                        ? <TextField source="invite_code" />
                                        : null : null
                            <DateField source="expiration_dt" />   
                            <EditButton />  
                        </Datagrid>
                    </List>