React Context: TypeError: рендеринг не является функцией

Я пытаюсь использовать React Context для передачи функции вложенному дочернему компоненту, который эффективно позволяет дочернему элементу обновлять состояние родителей при нажатии.

Проблема в том, что я, кажется, получаю сообщение об ошибке 'TypeError: рендеринг не является функцией. (В render(newValue) render является экземпляром Array', а ошибка в моей консоли гласит: «Предупреждение: потребитель контекста был визуализирован с несколькими дочерними элементами или дочерним элементом, который не является функцией. Потребитель контекста ожидает одного дочернего элемента, который является функцией. Если вы передали функцию, убедитесь, что вокруг нее нет пробелов в конце или начале»..

Я просмотрел эту ошибку, а также документацию, но, похоже, нет ответов на мой вопрос, я не могу понять, почему это не работает.

Обновлено: Я должен добавить, что визуализируются несколько дочерних компонентов, поскольку они построены из массива объектов.

Фрагменты:

Родитель:

class Product extends Component {
    state = {
        selected_ind: 0
    };

    handleContextChange = selected_ind => {
        this.setState({selected_ind});
    };

    render() {
        const contextValue = {
            data: this.state,
            handleChangeEvent: this.handleContextChange
        };

        //Desconstruct props for ease of use
        const {
            attr_data,
            variant,
            product_name } = this.props;


        return (
                <Container>
                    <Heading>Product Options</Heading>
                    <IndexContext.Provider value = {contextValue}>
                        <OptionTile
                            tileColor='grey'
                            onPress = { () => this.props.navigation.navigate('Variants', {
                                attr_data: attr_data,
                                selected_ind: this.state.selected_ind
                            })} //Replace with named function
                            option = "Variant"
                            selected_ind = { this.state.selected_ind }
                            value = { selected_attr.name } />
                    </IndexContext.Provider>
                    <OptionTile
                        tileColor='grey'
                        option = "Quantity"
                        value = "1" />
                </Container>

Внутри OptionTile находится дочерний элемент, в котором я хотел бы использовать функцию:

const VariantTile = (props) => {
    return (
        <IndexContext.Consumer>
            {({ handleChangeEvent }) => (
                <TouchableOpacity onPress = {handleChangeEvent(props.index)}>
                    <AsyncImage
                        source = { props.img_src }
                        placeholderColor = "#fafafa"
                        style = {{ flex: 1, width: null, height: 200 }}
                    />
                    <Text>{ props.var_name }</Text>
                    <Text>{ props.price }</Text>
                    <Text>{ props.sku }</Text>
                </TouchableOpacity>
            )};
        </IndexContext.Consumer>
    )
};

А компонент контекста прост:

const IndexContext = React.createContext();

export default IndexContext;