第一次单击时FlatList renderItem未突出显示

import React, { useState } from 'react';
import { FlatList, TouchableOpacity, Text } from 'react-native';

const MyComponent = () => {
  const [data, setData] = useState([
    { id: 1, title: 'Item 1', selected: false },
    { id: 2, title: 'Item 2', selected: false },
    { id: 3, title: 'Item 3', selected: false },
    // 添加更多项...
  ]);

  const renderItem = ({ item }) => {
    const itemStyle = item.selected ? { backgroundColor: 'yellow' } : {};

    return (
      <TouchableOpacity onPress={() => handleItemClick(item.id)}>
        <Text style={itemStyle}>{item.title}</Text>
      </TouchableOpacity>
    );
  };

  const handleItemClick = (itemId) => {
    const updatedData = data.map((item) => {
      if (item.id === itemId) {
        return { ...item, selected: true };
      } else {
        return { ...item, selected: false };
      }
    });

    setData(updatedData);
  };

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={(item) => item.id.toString()}
    />
  );
};

export default MyComponent;