MUI 5 SX Typescript error when spreading values in prop

Question

I need some help with this typescript error with MUI sx prop. When I try to combined or spreed sx values into an sx prop I get this error. I works if I just do one item in the sx prop. It also works if I spreed the single item in the sx prop, but if I try more then one it throws the error.

error:

No overload matches this call.
  Overload 1 of 2, '(props: { component: ElementType<any>; } & SystemProps<Theme> & { children?: ReactNode; component?: ElementType<any> | undefined; ref?: Ref<...> | undefined; sx?: SxProps<...> | undefined; } & CommonProps & Omit<...>): Element', gave the following error.
    Type '{} | { clipPath?: SystemStyleObject<Theme> | ResponsiveStyleValue<ClipPath | ClipPath[] | undefined> | ((theme: Theme) => ResponsiveStyleValue<...>); ... 810 more ...; displayPrint?: SystemStyleObject<...> | ... 1 more ... | ((theme: Theme) => ResponsiveStyleValue<...>); } | ... 33 more ... | { ...; }' is not assignable to type 'SxProps<Theme> | undefined'.
      Type '{ clipPath?: SystemStyleObject<Theme> | ResponsiveStyleValue<Property.ClipPath | Property.ClipPath[] | undefined> | ((theme: Theme) => ResponsiveStyleValue<...>); ... 843 more ...; [Symbol.unscopables](): { ...; }; }' is not assignable to type 'SxProps<Theme> | undefined'.
        Type '{ clipPath?: SystemStyleObject<Theme> | ResponsiveStyleValue<Property.ClipPath | Property.ClipPath[] | undefined> | ((theme: Theme) => ResponsiveStyleValue<...>); ... 843 more ...; [Symbol.unscopables](): { ...; }; }' is not assignable to type 'undefined'.
  Overload 2 of 2, '(props: DefaultComponentProps<BoxTypeMap<{}, "div">>): Element', gave the following error.
    Type '{} | { clipPath?: SystemStyleObject<Theme> | ResponsiveStyleValue<ClipPath | ClipPath[] | undefined> | ((theme: Theme) => ResponsiveStyleValue<...>); ... 810 more ...; displayPrint?: SystemStyleObject<...> | ... 1 more ... | ((theme: Theme) => ResponsiveStyleValue<...>); } | ... 33 more ... | { ...; }' is not assignable to type 'SxProps<Theme> | undefined'.
      Type '{ clipPath?: SystemStyleObject<Theme> | ResponsiveStyleValue<Property.ClipPath | Property.ClipPath[] | undefined> | ((theme: Theme) => ResponsiveStyleValue<...>); ... 843 more ...; [Symbol.unscopables](): { ...; }; }' is not assignable to type 'SxProps<Theme> | undefined'.
        Type '{ clipPath?: SystemStyleObject<Theme> | ResponsiveStyleValue<Property.ClipPath | Property.ClipPath[] | undefined> | ((theme: Theme) => ResponsiveStyleValue<...>); ... 843 more ...; [Symbol.unscopables](): { ...; }; }' is not assignable to type 'undefined'.ts(2769)
Box.d.ts(11, 7): The expected type comes from property 'sx' which is declared here on type 'IntrinsicAttributes & { component: ElementType<any>; } & SystemProps<Theme> & { children?: ReactNode; component?: ElementType<...> | undefined; ref?: Ref<...> | undefined; sx?: SxProps<...> | undefined; } & CommonProps & Omit<...>'
Box.d.ts(11, 7): The expected type comes from property 'sx' which is declared here on type 'IntrinsicAttributes & SystemProps<Theme> & { children?: ReactNode; component?: ElementType<any> | undefined; ref?: Ref<...> | undefined; sx?: SxProps<...> | undefined; } & CommonProps & Omit<...>'

My code

<Box sx={{ ...formElementHolderStyled, ...formGroupStyled }}>
  <FormElements cardID={cardID} config={edit} />
</Box>

My SX values

export const formGroupStyled: SxProps<Theme> = {
  flexDirection: 'row',
  alignItems: 'flex-start',
  width: 1,
  pb: 3,

  '&:last-child': {
    pb: 0,
  },
};
export const formElementHolderStyled: SxProps<Theme> = {
  display: 'inline-flex',
  flexBasis: 370,
  '.MuiFormControl-root': { width: 1 },
};

Answer 1

Looks like this works https://mui.com/system/the-sx-prop/#passing-sx-prop

<Box sx={[  ...(Array.isArray(formGroupStyled) ? formGroupStyled : [formGroupStyled]), ...(Array.isArray(formGroupStyled) ? formGroupStyled : [formGroupStyled]) ]}>
  <FormElements cardID={cardID} config={edit} />
</Box>