When the developer sets the value only for the first viewport, The CSS props function is unable to override all viewport values of the theme config .

//theme.js
const breakpoints = ["52em"];
const styles = {
  h1: {
    color: ["red", "blue"]
  }
};

<Styled.h1 css={css({ color: ["rebeccapurple" ]})}>
  {props.children}
</Styled.h1>

I expected this to override the the larger viewports as well. But i had to explicitly set the value for all viewports.

<Styled.h1 css={css({ color: ["rebeccapurple", 'rebeccapurple'] })}>
  {props.children}
</Styled.h1>

I have reproduced the issue in this codesanbox. you can reproduce the issue by resizing

Is this the intended behaviour? If not, can we filter the props and merge in jsx function/pragma?