Using React Hooks initialize Data, But Not Work Correctly

[LiuL0703]

here is my code

import React, {Fragment,useState, useEffect,useReducer} from 'react';
import {
  SafeAreaView,
  ScrollView,
  View,
  Text,
  TouchableHighlight,
  FlatList
} from 'react-native';


const HomePage = (props) => {
  const [selectedName,setselectedName] = useState('');
  const [nameList, setNameList] = useState([{'name':'abcd'},
      {'name':'abcd'},
      {'name':'abcd'},
      {'name':'abcd'}
  ]);

  function handleSelectName(value){
    setselectedName(value);
  }


  return (
    <Fragment>
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic">
          <View>
            { nameList.length > 0 && CustomCount(nameList,selectedName,handleSelectName) }
          </View>
        </ScrollView>
      </SafeAreaView>
    </Fragment>
  );
};


function CustomCount(data,count,handle){
  const counterStyle = {
    fontSize: 30,
    color: 'red',
  };
  return (
    <FlatList
      data={data}
      renderItem={({ item, index }) => (
        <View key={item}>
          <TouchableHighlight 
            onPress={()=>handle(index)} 
          >
            <Text style={ index === count ? counterStyle : {color: 'green'}} >{item.name}</Text>
          </TouchableHighlight>
        </View>
      )}
      numColumns={3}
    />
  )
}

export default HomePage;

What I expected

when i clicked the name, which name's style changes

What actually did

nothing happened

env

"react": "16.8.6",
"react-native": "0.60.4",

[react-native-bot]

We are automatically closing this issue because it does not appear to follow any of the provided issue templates.

👉 Click here if you want to report a reproducible bug or regression in React Native.