如何渲染SectionList Header？

import React from 'react';
import { SectionList, Text, View } from 'react-native';

const data = [
  { title: 'A', data: ['Apple', 'Apricot', 'Avocado'] },
  { title: 'B', data: ['Banana', 'Blueberry', 'Blackberry'] },
  { title: 'C', data: ['Cherry', 'Cranberry', 'Coconut'] },
];

const renderSectionHeader = ({ section }) => {
  return (
    <View style={{ backgroundColor: 'lightgray' }}>
      <Text style={{ fontSize: 18, fontWeight: 'bold' }}>{section.title}</Text>
    </View>
  );
};

const App = () => {
  return (
    <SectionList
      sections={data}
      keyExtractor={(item, index) => item + index}
      renderSectionHeader={renderSectionHeader}
      renderItem={({ item }) => <Text>{item}</Text>}
    />
  );
};

export default App;