How to make custom renderer interactive? (listen to component state update, and rerender)

Question

I added checkbox into my custom renderer, but it doesn't listen to state update. Do you have any ideas how to make state working in custom renderer?

I have red, that in v5.0.1 you can use as a renderer -- react components. But I can't find details in docs.

const quizRenderer = (htmlAttribs, children) => {
        const { type, quizid: quizId } = htmlAttribs
        return <View key={`quiz-${quizId}`}>{children}</View>
    }

    const variantRenderer = (
        htmlAttribs,
        children,
        convertedCSSStyles,
        passProps
    ) => {
        const { quizid: quizId, variantid: variantId, type } = htmlAttribs
        console.log('userAnswers', userAnswers)

        const handlePressQuizVariant = (quizId, variantId) => () => {
            let quizAnswers = userAnswers[quizId] || []
            //if this answer also been set, we remove it
            // if there was clear cell -- we add it
            if (quizAnswers.includes(variantId)) {
                quizAnswers = quizAnswers.filter(elem => elem !== variantId)
            } else {
                quizAnswers.push(variantId)
            }

            setUserAnswers(userAnswers => {
                const newUserAnswers = [...userAnswers]
                newUserAnswers[quizId] = quizAnswers
                return newUserAnswers
            })
        }

        return (
            <TouchableOpacity
                key={`variant-${quizId}-${variantId}`}
                onPress={handlePressQuizVariant(quizId, variantId)}
            >
                <Text>
                    <CheckBox
                        size={18}
                        checked={userAnswers[quizId].includes(variantId)}
                        {...(type === 'single'
                            ? { checkedIcon: 'dot-circle-o', uncheckedIcon: 'circle-o' }
                            : {})}
                        containerStyle={{ margin: 0, padding: 0 }}
                    />{' '}
                    {children}
                </Text>
            </TouchableOpacity>
        )
    }