MUI `sx` style combining doesn't work

[na933950]

Describe the bug
MUI styles are easy to define on their own. For example:

const displayOnDesktopStyles: SxProps = {
    display: { md: 'block', xs: 'none' }
}

const defaultFlexRowStyles: SxProps = {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    boxSizing: 'border-box',
    height: '100%',
    gap: 2
};

However, trying to combine these styles results in the first one not being applied. I.e

<Component sx={{...defaultFlexRowStyles, ...displayOnDesktopStyles}} /> 

Does not display the defaultFlexRowStyles.

Before Reporting
Does the bug persist in incognito mode? If not, it's probably something with your extensions/profile.

Yes

Offending Page/URL
N/A

To Reproduce

See example above and attempt.

Expected behavior

The first styles which are applied using the spread operator are not actually applied to the rendered component.

Screenshots
N/A

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome

Additional context