I'm using the flatlist in two different components to render different columns. One component will render three columns and the other just one column. However, when I change the state of my application, it returns the following error:

"Changing numColumns on the fly is not supported. Changed the key prop on FlatList when changing the number of columns to force a fresh render of the component."

    renderGrade() {
        return (
            <View style={telaStyle.container}>
                <FlatList
                    style={{ marginBottom: 10 }}
                    data={this.props.restauranteReducer.lstFamilias}
                    renderItem={({ item }) => (
                        <Familia
                            onPressFamilia={async () => {
                                if (this.listItemDisabled === false) {
                                    this.listItemDisabled = true;
                                    await this.onPressFamilia(item);
                                    this.listItemDisabled = false;
                                }
                            }}
                            item={item}
                        />
                    )}
                    keyExtractor={(item) => `${item.codigo.toString()}`}
                    numColumns={3}
                    refreshing={this.state.loading}
                    onRefresh={this.handlerRefresh}
                />
            </View>
        );
    }

    renderLista() {
        return (
            <View style={telaStyle.containerLista}>
                <FlatList
                    style={{ marginBottom: 10 }}
                    data={this.props.restauranteReducer.lstFamilias}
                    renderItem={({ item }) => (
                        <FamiliaLista
                            onPressFamilia={async () => {
                                if (this.listItemDisabled === false) {
                                    this.listItemDisabled = true;
                                    await this.onPressFamilia(item);
                                    this.listItemDisabled = false;
                                }
                            }}
                            item={item}
                        />
                    )}
                    keyExtractor={(item) => `${item.codigo.toString()}`}
                    numColumns={1}
                    refreshing={this.state.loading}
                    onRefresh={this.handlerRefresh}
                />
            </View>
        );
    }

    render() {
        return (
            this.props.sessionUsuario.visualizaGrade ?
                this.renderGrade()
                :
                this.renderLista()

        );
    }

If I leave both FlatList with the same number of columns, work, but I need it to be a FlatList with one column and another with three.