Can We Only Print One Header For Multiple Objects In Sectionlist In React Native?

Question

I am trying to create a list which divides items based on dates. To accomplish this I plan on using a sectionlist from the React native library. I have also extracted and modified my data to look something like this,

[{"data": [[Object]], "date": "23th July 2023"}, {"data": [[Object]], "date": "24th July 2023"}, {"data": [[Object]], "date": "24th July 2023"}, {"data": [[Object]], "date": "24th July 
2023"}]

here [Object] will be something like,

[{name: 'pizza', amount: '100', category: 'food', date:'2023-7-24 7:59:37'}]

Here date property may be different. I am using CURRENT_TIMESTAMP from sqlite3 to enter it in my table and then using SELECT to extract it.

I want to create a single sectionheader for multiple objects with the same date property. Instead, currently, my code creates different sectionheaders for each object. I want to achieve this preferably by not completely modifying the data. My code so far looks like this,

const month = ["January","February","March","April","May","June","July","August","September","October","November","December"];

const HomeScreen = () => {

  //Fetching data from expenses table in GastoCalc.db and optimizing it to make it more useable
  const [expenses, setExpenses] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const Data = await getExpenses();
  
        const temp = Data.map((data) => {
          const key = new Date(data.date)
            return {
              date: key.getDate() + "th " + month[key.getMonth()] + ' ' + key.getFullYear(),
              data: [data]
            }
        })
        setExpenses(temp);
      } catch (error) {
        console.log("Error retrieving expenses:", error);
      }
    };
    fetchData();
  }, []);


  // Render function to render items from the data
  const render = ({ item }) => {
    return (
      <View style={styles.listitem}>
        <Text>{item.name}</Text>
        <Text>{item.amount}</Text>
        <Text>{item.category}</Text>
      </View>
    );
  };

  // Render function to render header from the data
  const renderSectionHeader = ({ section }) => {

    return (
      <View>
        <Text>{ section.date }</Text>
      </View>
    );
  };

  return (
    <View style={styles.container}>
      <SectionList 
      sections={expenses}
      keyExtractor={(item, index) => item.date + '-' + index }
      renderItem={render}
      renderSectionHeader={renderSectionHeader}
      />
    </View>
  );
};

I did some research and found out through ChatGPT(ik not the best method) that if the section key(in this case date property) is the same for different objects then they will be grouped under the same sectionheader but that doesn't seem to work for me. One of my speculations is that it is not working because I am using Expo Go but I could be wrong here. This is one of the reasons why my date property looks like it does right now.

I also thought of completely changing the data I pass to the sectionlist by combing objects with the same date in another data variable/state but I am not sure how to implement it properly and want to try and find a better approach. Secondly, the reason I do not want to alter the data is because I plan on using the same data when I want to edit the database. I will be making each item on the list a touchable, which, when clicked, will allow you to edit or delete that entry from the database. If I change it, then I will need to come up with some other method to achieve the same.

Any help is greatly appreciated.