FlatList呈现数组的顺序错误

const data = [
  { id: '1', title: 'Item 1' },
  { id: '2', title: 'Item 2' },
  { id: '3', title: 'Item 3' },
];

<FlatList
  data={data}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <Text>{item.title}</Text>}
/>

const sortedData = data.sort((a, b) => a.id.localeCompare(b.id));

<FlatList
  data={sortedData}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <Text>{item.title}</Text>}
/>

const [data, setData] = useState([]);

useEffect(() => {
  fetchData().then((response) => {
    const sortedData = response.sort((a, b) => a.id.localeCompare(b.id));
    setData(sortedData);
  });
}, []);

<FlatList
  data={data}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <Text>{item.title}</Text>}
/>