Как правильно определить ссылку (React.RefObject) для styled-компонентов (для TypeScript)?

Question

Как правильно определить ссылку для стилевых компонентов?

Я написал следующий тестовый код:

import React, {Component, RefObject, ReactNode} from 'react';
import styled from 'styled-components';

const ModalShadowContainer = styled.div` 
    background-color: black;
`;

export default class Modal extends Component {

    private modalRef: RefObject<HTMLDivElement>;

    constructor(props: {}) {
        super(props);
        this.modalRef = React.createRef<HTMLDivElement>();
    }

    public render(): ReactNode {
        return (
            <ModalShadowContainer ref={this.modalRef}>
                {this.props.children}
            </ModalShadowContainer>
        );
    }

}

В строке появляется ошибка:

<ModalShadowContainer ref={this.modalRef}>

Текст ошибки:

Type 'RefObject<HTMLDivElement>' is not assignable to type 'string | (string & ((instance: HTMLDivElement | null) => any)) | (string & RefObject<HTMLDivElement>) | (((instance: Component<ThemedOuterStyledProps<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any>, any, any> | null) => any) & string) | ... 5 more ... | undefined'.
  Type 'RefObject<HTMLDivElement>' is not assignable to type 'RefObject<Component<ThemedOuterStyledProps<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any>, any, any>> & RefObject<HTMLDivElement>'.
    Type 'RefObject<HTMLDivElement>' is not assignable to type 'RefObject<Component<ThemedOuterStyledProps<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any>, any, any>>'.
      Type 'HTMLDivElement' is not assignable to type 'Component<ThemedOuterStyledProps<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any>, any, any>'.
        Property 'setState' is missing in type 'HTMLDivElement'.

Как описать (определить) ссылку на языке TypeScript?