Estoy tratando de agregar un objeto a Firestore. El método para agregar a Firestore es verificar la clave del objeto. Por ejemplo, 'Electrónica1' es la clave del objeto que está presente en el documento, luego aumente el último dígito en 1 y agréguelo al documento, que será 'Electrónica2'. Mi problema es que uso setIndex useState para registrar el dígito más grande en el documento. Sin embargo, por primera vez, el índice siempre será 0 incluso cuando cambie el 'valor'. ¿Cómo puedo hacer que se actualice cada vez que cambia el valor en el menú desplegable?

 const [index, setIndex] = useState(0); useEffect(() => { let isCancelled = false; async function dataToAdd() { if (value !== null) { const charLen = value.length; const docRef = doc(db, 'users', auth.currentUser.uid, 'expense', value); const docSnap = await getDoc(docRef); if (docSnap.exists()) { const singDocRec = docSnap.data(); let num = 0; Object.entries(singDocRec).map(([key, record]) => { if (key != null || key != '' || key != undefined) { let i = key.slice(charLen, key.length); if (i > num) { num = i; } } }); if (!isCancelled) { setIndex(parseInt(num) + 1); } } } } dataToAdd(); return () => { isCancelled = true; }; }, [value]); const createObj = value => { const concatStr = value.concat(index.toString()); let obj = {}; obj[concatStr] = {title: title, date: date, category: value}; return obj; }; <DropDownPicker style={{ borderRadius: 0, }} open={open} value={value} items={items} setOpen={setOpen} setValue={setValue} setItems={setItems} /> <TouchableOpacity onPress={() => { addFunc(value, createObj(value)); navigation.navigate('Home'); }} style={{ width: 300, height: 50, marginTop: 20, borderWidth: 2, justifyContent: 'center', }}> <Text style={{textAlign: 'center', color: 'black', letterSpacing: 2}}> CONFIRM </Text> </TouchableOpacity>