I am building a frontend website using React, my problem stems from my Supabase API. For some odd reason, my code is not returning the expected data that I wanted to display as the default value in my form’s input. I looked for any errors, made sure my RSL polices is read, and public, right, and I have created a row in my table, but when I check my console for some reason I am getting undefined from the values so I don’t know at this point where’s the issue is.

The code I suspect is the following three files:

apiSetting:

export async function getSettings() {
  let { data, error } = await supabase.from("settings").select("*");

  /* if (error) {
    return console.error("There is an Error Be Careful");
    throw new Error("There is an Error in The Code");
  }*/

  return data;
}

useSetting:

import { useQuery } from "@tanstack/react-query";
import { getSettings } from "../../services/apiSettings";

export function useSettings() {
  const {
    data: settings,
    isLoading,
    error,
  } = useQuery({
    queryKey: ["settings"],
    queryFn: getSettings,
  });

  console.log(settings, "my hook");

  if (error) {
    console.error("Error fetching settings:", error);
  }

  return { isLoading, error, settings };

updateSettingForm:

import Form from "../../ui/Form";
import FormRow from "../../ui/FormRow";
import Input from "../../ui/Input";
import { useSettings } from "./useSettings";

function UpdateSettingsForm() {
  const {
    isLoading,
    settings: {
      minimumBookingLength,
      maxBookingLength,
      maxsGuestPerBooking,
      breakfastPrice,
    } = {},
  } = useSettings;
  console.log({
    minimumBookingLength,
    maxBookingLength,
    maxsGuestPerBooking,
    breakfastPrice,
  });
  return (
    <Form>
      <FormRow label="Minimum nights/booking">
        <Input
          type="number"
          id="min-nights"
          defaultValue={minimumBookingLength}
        />
      </FormRow>
      <FormRow label="Maximum nights/booking">
        <Input type="number" id="max-nights" defaultValue={maxBookingLength} />
      </FormRow>
      <FormRow label="Maximum guests/booking">
        <Input
          type="number"
          id="max-guests"
          defaultValue={maxsGuestPerBooking}
        />
      </FormRow>
      <FormRow label="Breakfast price">
        <Input
          type="number"
          id="breakfast-price"
          defaultValue={breakfastPrice}
        />
      </FormRow>
    </Form>
  );
}

export default UpdateSettingsForm;

Input would be appreciated, thanks in advance