Tengo problemas para intentar alinear las etiquetas de opciones del componente Autocompletar para que estén alineadas con sus encabezados de columna en el componente popper:

 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> ); } />