Why is the component not being rerendered?

Question

React

Let's say we have a collection of objects.

const mainData = {
            1: {
                title: 'подушка',
                price: 500
            },
           2: {
                title: 'матрешка',
                price: 520
            },
           3: {
                title: 'игрушка',
                price: 520
           }

//they are displayed and all is well.

sort(data){
      let suitableData = Object.values(data).sort((a,b) => a.price > b.price ? -1 : 1)
      return suitableData
}
let data;
      data = mainData
// когда меняю состояние то применяю сортировку (создаю новую коллекцию)
if(this.props.on ){
    data = this.sort(mainData)
}
{    
  Object.keys(data).map( (elem, i ) => { 
      return  <Item key={i} data={data[elem]} partners={partners} />   
  })   
 }

I look in the console and indeed an already sorted collection gets into the map, but nothing happens on the screen. I go into the item component and here the objects are no longer sorted, but in their previous form.
Uh-huh, I decided to add a method that removes a component from a sorted collection and you know what? (Suddenly) everything was redrawn with the necessary sorting.

Do you have any idea why this might be?