TypeScript is wrong if use styled-system functions

[sotnikov-link]

Describe the bug Types of React and styled-system work wrong

import styled from "@emotion/styled";
import { display } from "styled-system";

export const AnchorWithDisplay = styled.a`
  color: red;
  ${display}
`;

type AnchorWithDisplayProps = React.ComponentPropsWithoutRef<
  typeof AnchorWithDisplay
>;

// Will be as below 👎🏽

// type AnchorWithDisplayProps = {
//   [x: string]: any;
//   [x: number]: any;
// }

export const anchorWithDisplayProps: AnchorWithDisplayProps = {
  href: true // not error! bad! 🥺
};

To Reproduce See example.tsx on https://codesandbox.io/s/types-styled-system-05cn9

Temporary solution

import styled from "@emotion/styled";
import { display } from "styled-system";

export const AnchorWithDisplayHack = styled.a`
  color: red;
  ${String(display)} /* hack! */
`;

type AnchorWithDisplayHackProps = React.ComponentPropsWithoutRef<
  typeof AnchorWithDisplayHack
>;

export const anchorWithDisplayHackProps: AnchorWithDisplayHackProps = {
  href: true // right error! good!
};

[sotnikov-link]

If display declare as const display = () => "my string" then all will be work. I think problem to function type "display".

[sotnikov-link]

If display declare as const display = (arg: any) => arg then it does not work. It equals type of function "display"

1. styleFn: styled-system/index.d.ts#L147
2. display: styled-system/index.d.ts#L456