How to use the @xstyled/system.createSystemComponent function in @xstyled/system

type CustomSystemBoxProps = MarginProps & PaddingProps;

const CustomSystemBox = styled.div`
    ${customSystem}
`;

const customSystemBoxTest = () => (
    <div>
        
    </div>
);

// createSystemComponent

const InnerSystemComponentBox = createSystemComponent(React, 'div', shadows);

const SystemComponentBox = styled(InnerSystemComponentBox)`
    ${shadows}
`;

const systemComponentBoxTest = () =&gt; (
    <div>
        
    </div>
);

// TH

th('colors.primary900')({});

th.color(2)({});

Object.keys(scStyled).forEach(key => {
  styled[key] = styled(key)
  styled[`${key}Box`] = styled(
    Box.withComponent(createSystemComponent(React, key)),
  )
})

createStyle.attrs = attrs => {
    const nextCreateStyle = baseCreateStyle.attrs(attrs)
    return getCreateStyle(nextCreateStyle)
  }
  createStyle.withConfig = config => {
    const nextCreateStyle = baseCreateStyle.withConfig(config)
    return getCreateStyle(nextCreateStyle)
  }
  return createStyle
}

export function styled(component) {
  return getCreateStyle(scStyled(component))
}

const InnerBox = createSystemComponent(React)

export const Box = styled(InnerBox)(createBox)

styled.box = styled(Box)

Object.keys(scStyled).forEach(key => {
  styled[key] = styled(key)
  styled[`${key}Box`] = styled(
    Box.withComponent(createSystemComponent(React, key)),
  )
})