Aligning grid items in popper component

Question

I am having trouble trying to align the option labels from the AutoComplete component so that they are aligned with their column headers in the popper component:

const PopperMy = function (props: PopperProps) {
    const { children, ...rest } = props;
    return (
        <Popper {...rest} placement="bottom-start">
            <Box sx={{
                display: 'grid',
                gridTemplateColumns: 'repeat(4, 1fr)',
                gap: 1,
                gridTemplateRows: 'auto',
                gridTemplateAreas: `"date order name items"
                "date order name items"`,
            }}>

                <Box sx={{ gridArea: 'date' }}><Typography>CreatedDate</Typography></Box>
                <Box sx={{ gridArea: 'order' }}><Typography>Order</Typography></Box>
                <Box sx={{ gridArea: 'name' }}><Typography>Name(email/phone)</Typography></Box>
                <Box sx={{ gridArea: 'items' }}><Typography>Items</Typography></Box>
            </Box>
            {children}
        </Popper>
    );
};

<Autocomplete
                PopperComponent={PopperMy}                   
                renderOption={(props, option: any) => {
                    return (
                        <li {...props} key={option.id} >
                            <Box sx={{ gridArea: 'items' }}>{convertToDateTime(option.createdtime).toFormat('d MMM HH:mm')}</Box>
                            <Box sx={{ gridArea: 'order' }}>{option.order}</Box>
                            <Box sx={{ gridArea: 'name' }}>{option.name}({option.email}/{option.phone})</Box>
                            <Box sx={{ gridArea: 'date' }}>{option.itemlist}</Box>
                        </li>

                    );

                }      
            />

Answer 1

Turn each value into an element then set a max-width and min-width for each value in order to make sure they are aligned.