установка ключа в компоненте не выполняет повторную визуализацию компонента при обновлении состояния

Question

У меня есть компонент, у которого есть два дочерних элемента:

1. Компонент, где пользователь вводит и выбирает тему

2. Компонент, который отображаетрезультаты, основанные на теме, выбранной в предыдущем компоненте

Итак, это код родительского компонента:

import SearchBox from "../../components/SearchBox";
import Results from "../../components/Results";

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTopic: null,
        };
    }

    onSelectTopic = (topic) => this.setState({
        selectedTopic: topic,
    });

    render() {
        return (
            <div>
                <SearchBox
                    onSelectTopic={this.onSelectTopic}
                />
                <Results
                    key={this.state.selectedTopic && this.state.selectedTopic.id}
                    selectedTopic={this.state.selectedTopic}
                />
            </div>
        );
    }
}

export default Home;

По сути, компонент SearchBox обновляетсостояние родительского компонента, который распространяет выделение на компонент Results.

Компонент Results имеет свое собственное состояние, которое я хочу очистить при передаче нового выделения.Вместо использования getDerivedStateFromProps в Results для очистки его состояния я добавил ключ к <Results key={...}/>, как в приведенном выше фрагменте.

Я ожидал, что каждый раз, когда состояние вродительский компонент обновляется (т. е. метод onSelectTopic вызывается выше), компонент Results воссоздается, но вместо этого компонент вообще не обновляется.Я что-то пропустил?Если я удаляю его свойство key, Results обновляется должным образом (то есть, не очищая его внутреннее состояние, чего я хочу достичь с помощью key)

Кстати, я использую preact вместо реакции, но, насколько я понимаю, поведение относительно свойства key компонентов одинаково.