Компонент, производный от React, не обновляется при изменении состояния

Я новичок в реакции, и это скорее концептуальный вопрос, чем конкретное программирование.

У меня есть основной компонент, который состоит из 3 подкомпонентов. Назовите их A, B, C. A - график, B - изображение, а C - набор переключателей (X, Y, Z). Существует состояние, связанное с C, для которого по умолчанию задан {buttonSelected: "Y"}.

Когда загружается основной компонент, из prepareData(this.state.buttonSelected) вызывается функция render(). Эта функция подготовит все данные, необходимые для отображения на графике и в изображении, а затем заполнит данные на объекте и вернет объект. Весь график и изображение внутри return() основного компонента создается с использованием этого возвращенного объекта, и компонент загружается успешно.

Теперь, когда я снова нажимаю на радиокнопку X, prepareData(this.state.buttonSelected) вызывается с правильным значением X из render(), он также возвращает объект, заполненный правильными данными для графика и изображения. Но график и изображение не перерисовываются с новыми значениями.

Это потому, что данные для создания графика и изображения не в состоянии? Должна ли каждая часть, которая нуждается в повторной визуализации, быть связана с props or state, и данные, полученные из другого состояния, не должны повторно отображаться?

редактировать: добавлен псевдокод

const prepareData = buttonSelected => {
   <chart data and image preparation based on buttonSelected >
   object.chartdata, object.imagedata = <prepared data>
   return object
}

class MainComponent extends Component {
   constructor(){
      this.state = {buttonSelected: "Y"}
   }

onButtonClick(c){ 
   this.setState({buttonSelected: c})
}
render(){ 
   returnData = prepareData(this.state.buttonSelected)
   return (
   <JSX using retrunData>
   <...... onClick  = {() => this.onButtonClick("Y") >
   <Chart data = {returnData.chartdata} />
   <Image source = {returnData.imagedata} />

}