use backgroundComponent has type error in typescript

[kakuilan]

code:

import { ModalProvider } from 'styled-react-modal'

const ModalBackground = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 30;
  background-color: green;
  opacity: 0.5;
`

export default class App extends Component {
  render () {
    return (
      <div>
        <ModalProvider backgroundComponent={ModalBackground}>
          <YourApp />
        </ModalProvider>
      </div>
    )
  }
}

error:

TS2769: No overload matches this call.   
Overload 1 of 2, '(props: ModalProviderProps | Readonly<ModalProviderProps>): ModalProvider', gave the following error.     Type 'IStyledComponent<"web", FastOmit<{ [x: string]: any; [x: number]: any; [x: symbol]: any; } & { theme?: any; } & { as?: string | ComponentType<any> | undefined; forwardedAs?: string | ComponentType<any> | undefined; }, never>>' is not assignable to type 'AnyStyledComponent | undefined'.       Type 'IStyledComponent<"web", FastOmit<{ [x: string]: any; [x: number]: any; [x: symbol]: any; } & { theme?: any; } & { as?: string | ComponentType<any> | undefined; forwardedAs?: string | ComponentType<any> | undefined; }, never>>' is not assignable to type 'StyledComponent<any, any, any, any>'.         
Type 'IStyledComponent<"web", FastOmit<{ [x: string]: any; [x: number]: any; [x: symbol]: any; } & { theme?: any; } & { as?: string | ComponentType<any> | undefined; forwardedAs?: string | ComponentType<any> | undefined; }, never>>' is not assignable to type 'string'.   Overload 2 of 2, '(props: ModalProviderProps, context: any): ModalProvider', gave the following error.     Type 'IStyledComponent<"web", FastOmit<{ [x: string]: any; [x: number]: any; [x: symbol]: any; } & { theme?: any; } & { as?: string | ComponentType<any> | undefined; forwardedAs?: string | ComponentType<any> | undefined; }, never>>' is not assignable to type 'AnyStyledComponent | undefined'.