Стилизованные компоненты v4 refObject

Question

Я слежу за тем, как документы из стилевых компонентов объяснили использование refs в v4 библиотеки здесь: https://www.styled -components.com / docs / advanced # refs

Однако на самом деле это не похоже на работу.Ссылка на содержание жалуется на неправильный тип, используемый при создании React.RefObject и установке его на ref на компоненте styled.

Вот что я сделал до сих пор:

const _Wrapper = styled.div`
position: relative;
height: 100%;
overflow: auto;
padding: 0px 48px;`;

Затем я создал refObject и инициализировал его в своем конструкторе:

this.flyoutRef = React.createRef();

Теперь при установке этого параметра на ref для styleled-компонента он не запуститсяа также показывает ошибку:

<_Wrapper ref={this.flyoutRef} >{children}</_Wrapper>

Там из TS отображается ошибка:

Type 'Ref<HTMLElement>' is not assignable to type 'string | (string & ((instance: HTMLDivElement | null) => void)) | (string & RefObject<HTMLDivElement>) | (((instance: Component<ThemedOuterStyledProps<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any>, any, any> | null) => void) & string) | ... 6 more ... | undefined'.

В соответствии с документами из стиля-компоненты я реализую это именно так, как это показывает.Я даже пытался использовать forwardRef, как показали различные примеры, но ошибка по-прежнему остается той же.

Вот как я создал стилевой компонент с forwardRef:

const Div = ({ innerRef, ...props}: any) => <div innerRef={innerRef} {...props} />;

const Forwarded = React.forwardRef((props, ref) => (
    <Div {...props} innerRef={ref} />
));

const _Wrapper = styled(Forwarded)`
    position: relative;
    height: 100%;
    overflow: auto;
    padding: 0px 48px;
`;

И я все еще использую его так же, как и раньше:

<_Wrapper ref={this.flyoutRef} >{children}</_Wrapper>

Это теперь показывает эту ошибку:

Type 'Ref<HTMLElement>' is not assignable to type '(string & ((instance: {} | null) => void)) | (string & RefObject<{}>) | (((instance: Component<ThemedOuterStyledProps<WithOptionalTheme<RefAttributes<{}>, any>, any>, any, any> | null) => void) & ((instance: {} | null) => void)) | ... 4 more ... | undefined'.

Так что, документы из стилевых компонентов неправильны?Или мне не хватает чего-то, что нужно переслать сюда?Буду очень признателен за разъяснения о том, что здесь происходит, заранее благодарю за помощь.

Версии:

styled-components: 4.1.3

реакция: 16.8.3