Estoy tratando de crear una aplicación simple de tareas pendientes usando firebase como mi CMS. Pero me encuentro con un error al intentar crear mi documento en el firewall. mi código es,

 const addToDo = (e) => { e.preventDefault(); addDoc(collection(db, "todos"), { inprogress: true, timestamp: firebase.firestore.FieldValue.serverTimestamp(), todo: todoInput, }) setTodoInput("");

}

Entonces trato de llamar a esta función una vez que hago clic en el botón en el formulario,

 <form> <TextField id="standard-basic" label="Write a Todo" variant="standard" className="textField" value={todoInput} onChange={(e) => { setTodoInput(e.target.value); }} /> <Button type="submit" variant="contained" onClick={addToDo} className="buttonDisplay"> Display </Button> </form>

Cuando hago clic en el botón, aparece un error en la consola que dice "Error de tipo no capturado: no se pueden leer las propiedades de undefined (leyendo 'FieldValue')".

Aquí también he adjuntado la importación de mi App.js,

 import './App.css'; import { TextField, Button } from '@material-ui/core'; import { useState } from 'react'; import {db} from './firebase_cofig'; import firebase from 'firebase/compat/app'; import { collection, addDoc } from "firebase/firestore";

Y este es mi archivo firebase_config.js,

 import { initializeApp } from "firebase/app"; import { getFirestore } from "firebase/firestore"; const firebaseConfig = { apiKey: "AIzaSyAVa9YdtqQAYuZ0u5stifRRhp5RULHLnRc", authDomain: "to-do-app-fd528.firebaseapp.com", projectId: "to-do-app-fd528", storageBucket: "to-do-app-fd528.appspot.com", messagingSenderId: "646758689416", appId: "1:646758689416:web:0c91670c0caa3d08b34d3d" }; // Initialize Firebase const app = initializeApp(firebaseConfig); // const db = firebase.firestore(); const db = getFirestore(app); export { db };

alguien me puede ayudar en este tema?