Can’t render data from supabase to react native mobile app

i have created my table in supabase enter image dethe table elements

import {
  StyleSheet,
  Text,
  View,
  Pressable,
  FlatList,
  ActivityIndicator,
} from "react-native";
import React, { useEffect, useState } from "react";
import { supabase } from "../supabaseClient"; // Ensure the correct path
import { useAuthentication } from "../hooks/useAuthentication";
import AntDesign from "@expo/vector-icons/AntDesign";

export default function Home({ navigation }) {
  const { isAuthenticated, logout } = useAuthentication();
  const [agriculteurs, setAgriculteurs] = useState([]);
  const [loading, setLoading] = useState(true);

  const handleLogout = () => {
    logout(navigation);
  };

  useEffect(() => {
    const fetchData = async () => {
      try {
        let { data: Type_Agriculteur, error } = await supabase
          .from("Type_Agriculteur")
          .select("*");

        if (error) {
          console.error("Supabase error:", error);
        } else {
          setAgriculteurs(data);
          console.log("Fetched data:", data);
        }
      } catch (error) {
        console.error("Error fetching data:", error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  const renderItem = ({ item }) => (
    <View style={styles.item}>
      <Text style={styles.itemText}>
        {item.Type_ID} {item.Type}
      </Text>
    </View>
  );

  return (
    <View style={styles.container}>
      <Pressable onPress={handleLogout} style={styles.logoutButton}>
        <AntDesign name="logout" size={24} color="black" />
      </Pressable>
      <Text style={styles.title}>Home</Text>
      <View>
        {loading ? (
          <ActivityIndicator size="large" color="#0000ff" />
        ) : (
          <FlatList
            data={agriculteurs}
            renderItem={renderItem}
            keyExtractor={(item) => item.Type_ID.toString()}
          />
        )}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    padding: 16,
  },
  title: {
    fontSize: 24,
    marginBottom: 16,
    textAlign: "center",
  },
  logoutButton: {
    position: "absolute",
    top: 50,
    right: 10,
  },
  item: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: "#ccc",
  },
  itemText: {
    fontSize: 18,
  },
});

when i run the app i get this error :

error fetching data: TypeError: Can not read property ‘from’ of undefined

what i cant understand is that all the imports are there but the code just keeps bugging

AI BOTS keep teling me to check supabase keys but the issus cant be comming from there since the authentication is working just fine