How to use the @emotion/is-prop-valid function in @emotion/is-prop-valid

const isTargetTag = isTag(as)

    let baseClassName = format(blockClassName)

    if (elementClassName) {
      baseClassName += `${elementSeparator}${format(elementClassName)}`
    }

    let fullClassName = baseClassName

    let key

    for (key in otherProps) {
      if (key === "forwardedComponent" || key === "as") continue
      else if (key === "forwardedRef") propsForElement.ref = otherProps[key]
      else if (!isTargetTag || validAttr(key)) {
        // Don't pass through non HTML tags through to HTML elements
        propsForElement[key] = otherProps[key]
      }

      if (modifiers.indexOf(key) > -1) {
        const mofifier = format(key)

        if (typeof otherProps[key] === "boolean") {
          if (otherProps[key]) {
            fullClassName += " "
            fullClassName += `${baseClassName}${modifierSeparator}${mofifier}`
          }
        } else {
          const value = otherProps[key]
          fullClassName += " "
          fullClassName += `${baseClassName}${modifierSeparator}${mofifier}${modifierValueSeparator}${value}`

const Styled = (props: StyledProps) => {
      const {as, className} = props
      // $FlowFixMe theming ThemeContext types need to be fixed.
      const theme = React.useContext(ThemeContext)
      const classes = useStyles({...props, theme})
      const childProps: StyledProps = ({}: any)

      for (const prop in props) {
        // We don't want to pass non-dom props to the DOM,
        // but we still want to forward them to a users component.
        if (isTagName && !isPropValid(prop)) continue
        if (shouldForwardProp && shouldForwardProp(prop) === false) continue
        childProps[prop] = props[prop]
      }
      // $FlowIgnore we don't care label might not exist in classes.
      const classNames = `${classes[label] || classes.css || ''} ${classes.cssd || ''}`.trim()
      childProps.className = className ? `${className} ${classNames}` : classNames

      return React.createElement(as || type, childProps)
    }

  shouldForwardProp: prop => isPropValid(prop) && prop !== 'size',
})>(

  shouldForwardProp: prop => isPropValid(prop) && prop !== 'size',
})>(

  shouldForwardProp: prop => isPropValid(prop) && prop !== 'size'
})`

  shouldForwardProp: (prop) => prop !== 'direction' && isPropValid(prop)
})(({ isSorted, direction, theme: baseTheme }) => {

shouldForwardProp: name =>
      !['width', 'size', 'height', 'css', 'color'].includes(name) && isPropValid(name),
  })(

const Styled = React.forwardRef(({ as, ...props }, ref) => {
    const shouldForwardProps =
      typeof tag !== 'string' || (as && typeof as !== 'string')
    const theme = React.useContext(ThemeContext)
    let nextProps = shouldForwardProps ? props : {}
    let styles = {}
    args.forEach(arg => {
      const style = typeof arg === 'function' ? arg({ theme, ...props }) : arg
      Object.assign(styles, style)
    })

    if (!shouldForwardProps) {
      for (let key in props) {
        if (!isPropValid(key)) continue
        nextProps[key] = props[key]
      }
    }

    return jsx(as || tag, {
      ...nextProps,
      ref,
      css: styles,
    })
  })
  return Styled

  shouldForwardProp: (prop) => prop !== 'size' && isPropValid(prop)
})(({ size, theme: baseTheme }) => {

shouldForwardProp: (prop) =>
    ['height', 'width'].indexOf(prop) === -1 && isPropValid(prop)
})(({ breakpoints, height, inline, theme, width, ...restProps }) => {