no estoy seguro de lo que estoy haciendo mal?

Me estoy volviendo indefinido cuando intento cargar los datos de mi formulario en mi supabase, los datos llegan a la API sin definir, pero cuando los paso a la función, imprime lo que quiero enviar a la API en mi controlador de envío.

 export const Quote = () => { const [formIsValid, setFormIsValid] = useState(false); //----------------------------_FORM VALIDATION------------------------------------ const { value: firstName, inputBlurChangeHandler: firstNameBlur, isValid: firstNameValid, hasError: firstNameInputHasError, valueChangeHandler: firstNameChangeHandler, reset: resetFirstName, } = useInput((value) => value.trim() !== ""); **hooks & useEffect removed to shorten question they are same as above but different names** console.log(formIsValid, "FORM IS VALID"); const formSubmitHandler = async (event) => { event.preventDefault(); //UNDEFINEDS await fetch("api/dbhandler", { method: "POST", body: { firstname: firstName, secondname: secondName, street: streetAddress, phone: phoneNumber, email: emailAddress, postal: postalCode, about: quoteDescription, }, headers: { "Content-Type": `text/plain`, }, }); };

API viene como indefinido en req. body pero si inicio sesión en la consola, los valores del controlador de envío se pasan a la función, no estoy seguro de lo que estoy haciendo mal

 import { supabase } from "../../utils/supabaseClient"; const supabaseApiHandler = async (req, res) => { console.log(req.body.firstname); if (req.method === "POST") { const firstname = req.body.firstname; const secondname = req.body.secondname; const email = req.body.email; const street = req.body.street; const postal = req.body.postal; const phone = req.body.phone; const about = req.body.about; const { data, error } = await supabase.from("quotes").insert([ { firstname, secondname, email, street, postal, phone, about, }, ]); } res.status(200).json({ name: "test" }); }; export default supabaseApiHandler;