Реактивная функция сортировки не работает в FlatList

Question

Привет, я создаю функцию сортировки, используя реакционную систему ,

---

Я использую Плоский список для отображения элементов списка. когда я работаю в эмуляторе, а также в сети, в консоли не отображается сообщение об ошибке, но функция сортировки не работает.

мой код указан ниже, пожалуйста, проверьте

  import React, { Component } from 'react';
import contacts,{ compareNames } from './contacts'
import Card from './Card'
import {
  View,
  Button,
  StyleSheet,
  FlatList,
} from 'react-native';


const styles = StyleSheet.create({
  mainwrap: {
    display:'flex',
    flexGrow: 1,
    justifyContent: 'space-between',
    paddingBottom:30,

  },
  txtheading:{
    backgroundColor:'black',
    margin:'auto',
    marginTop:50,
  },
  scollitms:{
    display:'flex',
    flex:1,
    position:'relative'
  }
});
export default class App extends Component {
  state = {
    showCounter: true,
    contacts:contacts
  }
  toggglecounter = () => {
    this.setState((prev) => ({showCounter: !prev.showCounter}))
  }
  sorting = () => {
    this.setState((prev) => ({
      contacts: [...prev.contacts].sort(compareNames)
    }))
  }
  renderItem = ({item}) => (<Card key={item.id} {...item} />)
  render() {
      return (
        <View style={[styles.mainwrap]}>
          <View style={[styles.marginfromtop , styles.countfont, styles.txtheading]}>
            <Button style={{ marginTop: 50, zIndex:999}} onPress={this.toggglecounter} title="Toggle Contacts" />
            <Button onPress={this.sorting} title="sort" />
          </View>
         {this.state.showCounter ?
          <FlatList  style={[styles.scollitms]}
            data={this.state.contacts}
            renderItem={this.renderItem}
            keyExtractor={item => item.key.toString()}
          />
          : null
          }
      </View>
    );
  }
}

ниже приведена сортировка функция, которую я вызываю

export const compareNames = (contact1, contact2) => contact1.name > contact2.name