React Native Redux onPress not able to find component when calling function

Question

I am trying to get my application working in a way that when a touchable opacity is pressed a function is called sending a post request to the backend which is Postgres. The backend is working as expected. As it stands it will console.log correctly. For example if I replace the addHabit() call with console.log(auth.user.id, habit.name) the correct values will be output based on the item I pressed. However, when I attempt to change the logging to an actual function call I get an error saying: "Couldn't find a 'component', 'getComponent' or 'children' prop for the screen 'SuggestedHabits'. This can happen if you passed 'undefined'"

I've been looking around and most responses to this error seem to say that imports are written incorrectly, but I can't seem to find any imports that are causing this issue. If anyone can help that would be greatly appreciated. Code snippets are as follows:

The window where the error is occurring (In renderHabbits>TouchableOpacity>onPress):

import { Ionicons } from "@expo/vector-icons";
import React from "react";
import {
  View,
  Text,
  FlatList,
  SafeAreaView,
  TouchableOpacity,
} from "react-native";
import { Header } from "../../../components";
import { connect } from "react-redux";
import { addHabit } from "../../../actions/habits";

const suggested = [
  {
    id: 0,
    name: "eat breakfast",
    category: "health",
    frequency: "Daily"
  },
  ... other suggestions
];

const renderHabits = ({ item, addHabit, auth }) => {
  const habits = item;
  return (
    <View
    style={{
      backgroundColor: "#fff",
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "space-between",
      paddingHorizontal: 20,
      borderRadius: 20,
      marginVertical: 10,
      marginHorizontal: 40,
    }}
  >
    <TouchableOpacity onPress={() => addHabit(auth.user.id, habits.name, habits.category, habits.frequency)}>
      <Ionicons name="add" size={36} color="#7A9983" />
    </TouchableOpacity>
    <Text
      style={{
        textAlignVertical: "center",
        alignSelf: "center",
        padding: 20,
      }}
    >
      {habits.name}
    </Text>
    <Text></Text>
  </View>
  );
};

const SuggestedHabits = ({ navigation, addHabit, auth }) => {
  return (
    <>
      <Header
        title="Suggested Habits"
        leftComponent={
          <TouchableOpacity onPress={() => navigation.pop()}>
            <Ionicons name="chevron-back-outline" size={30} color="#7A9983"/>
          </TouchableOpacity>
        }
      />
      <SafeAreaView>
        <FlatList data={suggested} renderItem={renderHabits} />
      </SafeAreaView>
    </>
  );
};
const mapStateToProps = (state) => {
  return {
    habits: state.habits,
    auth: state.auth,
  };
};

export default connect(mapStateToProps, {
  addHabit,
})(SuggestedHabits);

For reference the addHabbit import in the previous file is exported as follows:

export default connect(mapStateToProps, {
  addHabit,
})(AddHabit);

Answer 1

As the official doc says, renderItem returns only these 3 values:

renderItem({ item, index, separators });

So you're destructuring incorrectly and addHabit and auth don't exist in the renderItem