I am getting multiple documents, but I do not get the information in real time, what am I doing wrong?

export const tiempoReal = async (coleccion, documento) => {

let response = { statusresponse: false, data: null }; return new Promise(async (resolve, reject) => { await db .collection(coleccion) .doc(documento) .onSnapshot( (docSnapshot) => { const producto = docSnapshot.data(); producto.id = docSnapshot.id;

      response.data = producto;
      response.statusresponse = true;
      return resolve(response);
    },
    (error) => {
      console.log(reject(error));
    }
  );
return response;

}); };

The data that I get from firebase, I assign it to a state to use the information, inside a useEffect.

useEffect(() => {
(async () => {
  const platillo = (await tiempoReal("Productos", id)).data;
  setcompra(platillo.ventas);
})();

}, []);

I get the information, but not in real time, it helps!

I am getting multiple documents, but I do not get the information in real time, what am I doing wrong?

export const tiempoReal = async (coleccion, documento) => {
  let response = { statusresponse: false, data: null };
  return new Promise(async (resolve, reject) => {
    await db
      .collection(coleccion)
      .doc(documento)
      .onSnapshot(
        (docSnapshot) => {
          const producto = docSnapshot.data();
          producto.id = docSnapshot.id;

          response.data = producto;
          response.statusresponse = true;
          return resolve(response);
        },
        (error) => {
          console.log(reject(error));
        }
      );
    return response;
  });
};

The data that I get from firebase, I assign it to a state to use the information, inside a useEffect.

  useEffect(() => {
    (async () => {
      const platillo = (await tiempoReal("Productos", id)).data;
      setcompra(platillo.ventas);
    })();
  }, []);

I get the information, but not in real time, it helps!