Issue with forwardRef

[jonathanroze]

Hi, this is my code and I get this error

Failed prop type: Invalid prop 'forwardRef' supplied to Theme.undefined, expected a ReactNode.

My code:

import React from 'react';
import {createThemedComponent} from 'react-native-theming';
import {createStyle} from 'react-native-theming';
import {Portal} from 'react-native-portalize';
import {Modalize} from 'react-native-modalize';
import normalize from 'react-native-normalize';

import * as Haptics from 'expo-haptics';

import {Text, View} from "native";
import {isApple} from "utils/platform";

const ModalizeThemed = createThemedComponent(Modalize, ['modalStyle']);
type BaseProps = Modalize;

interface Props extends BaseProps {
    headerText?: string | null;
    contentStyle?: any;
    headerComponent?: any,
}

export class BottomSheet extends React.Component<Props> {
    static defaultProps: {
        headerText: null,
        headerComponent: null,
        children: null,
        open: () => void,
        close: () => void,
        contentStyle: {},
    };

    private modalRef: Modalize | null;

    constructor(props: Props) {
        super(props);
        this.open = this.open.bind(this)
        this.close = this.close.bind(this)
    }

    public open: () => void = () => {
        this.modalRef?.open();
    };

    public close: () => void = () => {
        this.modalRef?.close();
    };

    render() {
        const {headerText, headerComponent, children, contentStyle, ...props} = this.props;

        return (
            <Portal>
                <ModalizeThemed
                    ref={(ref: Modalize) => {this.modalRef = ref}}
                    modalStyle={[styles.modal, contentStyle]}
                    modalTopOffset={60}
                    closeSnapPointStraightEnabled={false}
                    onPositionChange={(pos: string) => pos === 'top' ? Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy) : null}
                    HeaderComponent={
                        <View>
                            {(headerText && !headerComponent) && (<View style={styles.headerContainer}><Text size="h3" style={styles.headerText}>{headerText}</Text></View>)}
                            {headerComponent && headerComponent}
                        </View>
                    }
                    {...props}>
                    <View style={styles.contentContainer}>
                        {children}
                    </View>
                </ModalizeThemed>
            </Portal>
        );
    }
}

const styles = createStyle({
    headerContainer: {
        borderTopLeftRadius: normalize(15),
        borderTopRightRadius: normalize(15),
        borderBottomWidth: 1,
        borderBottomColor: '@containerBackgroundColor',
        justifyContent: 'center',
        height: normalize(40),
        width: '100%',
        backgroundColor: '@cardBackgroundColor',
    },
    headerText: {
        // fontSize: normalize(isApple(14,16)),
        width: '100%',
        textAlign: 'center',
        fontWeight: isApple('600', 'bold'),
    },
    contentContainer: {
        flex: 1,
    },
    modal: {
        backgroundColor: '@containerBackgroundColor',
    },
});

But everything is rendering properly

Any ideas? Thanks