How to add multiple linear gradient properties for background with material ui?

Question

I am trying to apply two linear gradient at the same time to my background property.

In CSS, this is what I wanted to achieve.

background: linear-gradient(to bottom right, #dbeaff, #f3dfde), linear-gradient(to top right, #f7faff, #dbcff3);

In material ui, I applied the same rule for my Paper component with 'sx' as below, but it seems to only apply the first linear gradient, not both.

                            <Paper elevation={1} sx={{
                                display: 'flex',
                                justifyContent: 'center',
                                alignItems: 'center',
                                borderRadius: '18px',
                                flexWrap: 'wrap',
                                minWidth: '320px',
                                background: 'linear-gradient(to bottom right, #dbeaff, #f3dfde), linear-gradient(to top right, #f7faff, #dbcff3)',
                                '& > :not(style)': {
                                    m: 1,
                                    p: 1,
                                },
                            }}>

Any suggestions?