why sectionlist render string in one line react native

I am creating group by query in react native by using reduce function then I create section list to display data but I have some issues. My code

<View>
  <SectionList
    renderSectionHeader={({ section: { title} }) => (
      <Text style={{ fontWeight: 'bold' }}>{title}</Text>
    )}
    sections={this.state.dataSource}
    renderItem={({item, index, section}) => <Text key={index}>{section.data}</Text>}
    keyExtractor={(item, index) => item + index}
  />
</View>

const dataSource = responseJson.old_cases.reduce(function (sections, item) {
    let section = sections.find(section => section.gender === item.gender);
    
    if (!section) {
        section = { gender: item.gender,data:[] };
        sections.push(section);
    }
    
    section.data.push(item.name)
    return sections;
}, []);

this.setState({dataSource: dataSource // Pass the dataSource that we've processed above}); 

but my output is like that

title //header
name_1,name2
name_1,name2
title2 //header
name_3

Output I want

title //header
name_1
name2
title2 //header
name_3

I just want to show one name per line against each title but according to my code render works fine because first title have two records so it render twice but both names are on same line twice

You're rendering all the data in your section at once, you need to render only one item at once.

In your flatList:

renderItem={({item, index, section}) => <Text key={index}>{item}</Text>}