[Box] Add warning when using responsive object API if a key is not a valid breakpoint

[mnajdova]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When using the responsive object API on the Box sx prop, I have made a mistake and got the {} nesting wrong. I ended up with

<Box
  sx={{
    width: {
      xs: 100,
      color: 'red',
    }
  }}
/>

I was surprised to see the color red style applied.

Expected Behavior 🤔

The color red should not be applied. There may even be a warning that color is not a valid breakpoint. Pseudo selectors should not show the warning as any css property in that case.

First reported here #23053 (comment)

[mnajdova]

I wouldn't like to complicate the logic too much just for adding a warning for this use-case. I'd rather wait to see if the community will ask for something like this. Will close for now