Использование контекста в классе компонентов

Question

У меня возникла проблема с повторным отображением компонента при изменении контекста.

import React from 'react'
import styled from 'styled-components'

import { Data } from '../../data'

const SelectElement = styled('div')`
    width: 100%;
    display: flex;
    align-items: center;
    padding: 5px 0px;
    cursor: pointer;

    .selection_dot {
        height: 20px;
        width: 20px;
        border-radius: 50%;
        border: 1px solid grey;
        margin-right: 10px;
        padding: 2px;
        box-sizing: border-box;
    }

    .activeSelection {
        .active_color {
            height: 100%;
            width: 100%;
            border-radius: 50%;
            background-color: #6daed6;
        }
    }

    .selection_name {
        width: calc(100% - 30px);
        overflow: hidden;
    }
`

interface Props {
    name: string
    type?: string
    code?: string
    clickEvent?: Function
    active?: boolean
    activeFeatures?: string[]
}

interface State {
    active: boolean
}

export default class Select extends React.PureComponent<Props, State> {
    constructor(props: any) {
        super(props)

        this.state = {
            active: false,
        }
        this.renderActiveMarker = this.renderActiveMarker.bind(this)
    }

    renderActiveMarker(featureList) {
        if (featureList) {
            if (featureList.indexOf(this.props.code)) {
                return <div className="active_color" />
            }
        }
    }

    render() {
        let returnActiveSelection = data => {
            if (
                data.indexOf(this.props.type) > -1 &&
                data.indexOf(this.props.code) > -1
            ) {
                this.setState({
                    active: true,
                })
                return 'selection_dot activeSelection'
            } else {
                this.setState({
                    active: false,
                })
                return 'selection_dot'
            }
        }
        return (
            <Data.Consumer>
                {context => (
                    <SelectElement
                        data-feature-type={this.props.type}
                        data-feature-code={this.props.code}
                        onClick={() => {
                            this.props.clickEvent()
                        }}
                    >
                        <div
                            className={returnActiveSelection(
                                context.state.opts.features,
                            )}
                        >
                            {this.renderActiveMarker(
                                context.state.opts.features,
                            )}
                        </div>
                        <p className="selection_name">{this.props.name}</p>
                    </SelectElement>
                )}
            </Data.Consumer>
        )
    }
}

Как видно, этот компонент берет некоторые данные из провайдера API контекста и затем отображает маркер active_color внутривыбор див.По какой-то причине, когда контекст обновляется, этот компонент не рендерится.Я думаю, что смотрю на это слишком долго, и есть легкое объяснение, но я не вижу его.

Пожалуйста, дайте мне знать, что я делаю здесь неправильно.

Приветствия