[system] Wrong order of media queries with custom values.

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/brave-wilson-fz8zzg

Steps:

1. In the demo change window size to see the described bug
2. Check the inspector that media queries are in fact in wrong order. Media query with custom value has higher order.

Current behavior 😯

Media query with custom breakpoint value has higher order.

Expected behavior 🤔

Using breakpoint in this way:

const Styles = (theme) => ({
    [theme.breakpoints.up(750)]: {
       width: '75vw',  // style N1
    },
    [theme.breakpoints.up('md')]: {
       width: '50vw',  // style N2
    },
})

I am expecting, that for device with width more than md (900px) (growing from mobile to desktop) will be applied style N2. But it is overridden by style N1.

Context 🔦

The similar issue was reported in #16528, but it has different context. Here I use function in order to build styles.

Your environment 🌎

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Start with the linked CodeSandbox and reproduce the behavior by changing the window size, then inspect the generated media queries in the browser inspector. Trace the theme.breakpoints.up(750) and theme.breakpoints.up('md') entry points to determine why their order is wrong. Done means the md query overrides the 750px query above 900px.