Any help my in this error Next.js React

import React from "react";
import { useRouter } from "next/router";
import { useEffect, useContext, useState } from "react";
import { db } from "../../firabase/firebase";
import { doc, getDoc, updateDoc } from "firebase/firestore";
import Error404 from "../404";
import styled from "@emotion/styled";
import formatDistanceToNow from "date-fns/formatDistanceToNow";
import { es } from "date-fns/locale";
import { FirebaseContext } from "../../firabase";
import { Campo, InputSubmit } from "../../components/ui/Formulario";
import Boton from "../../components/ui/Boton";

const ContenedorProducto = styled.div`
  @media (min-width: 768px) {
    display: grid;
    grid-template-columns: 2fr 1fr;
    column-gap: 2rem;
  }
`;

const Post = () => {
  const [producto, guardarProducto] = useState({});
  const [error, guardarError] = useState(false);
  const router = useRouter();
  const { pid } = router.query;
  const { usuario } = useContext(FirebaseContext);
  const docRef = doc(db, "productos", `${pid}`);

  useEffect(() => {
    // Si quieres evitar los muchos console.log y repeticiones de los valores en consola
    // Tan solo usa un useEffect un if para verificar si este elemento existe y ponlo como dependencia
    if (pid) {
      const obtenerProducto = async () => {
        const docSnap = await getDoc(docRef);
        if (docSnap.exists) {
          guardarProducto(docSnap.data());
          guardarError(false);
        } else {
          guardarError(true);
        }
      };
      obtenerProducto();
    }

    console.log("Pase por aqui");
  }, [pid]);

  console.log(usuario);

  const {
    comentarios,
    creado,
    descripcion,
    nombre,
    url,
    imagenURL,
    votos,
    creador,
    haVotado,
  } = producto;
  console.log(producto);

  return (
    <>
      {producto ? (
        <>
          {error && <Error404 />}
          <div className="contenedor">
            <h1 style={{ textAlign: "center", marginTop: "5rem" }}>{nombre}</h1>
            <ContenedorProducto>
              <div>
                <p>
                  Publicado hace:{" "}
                  {formatDistanceToNow(new Date(creado), {
                    locale: es,
                  })}
                </p>
                <p>Por: {creador.nombre}</p>
                <img src={imagenURL} />
                <p>{descripcion}</p>

                {usuario && (
                  <>
                    <h2>Agrega tu comentario</h2>
                    <form action="">
                      <Campo>
                        <input type="text" name="mensaje"></input>
                      </Campo>
                      <InputSubmit type="submit" value="Agregar Comentario" />
                    </form>
                  </>
                )}

                <h2 style={{ margin: "2rem 0" }}>Comentarios</h2>
                {comentarios.map((comentario) => (
                  <li>
                    <p>{comentario.nombre}</p>
                    <p>Escrito por: {comentario.usuarioNombre}</p>
                  </li>
                ))}
              </div>
              <aside>
                <Boton target="_blank" bgColor="true" href={url}>
                  Visitar URL
                </Boton>

                <div style={{ marginTop: "5rem" }}>
                  <p style={{ textAlign: "center" }}>{votos} Votos</p>
                  {usuario && <Boton>Votar</Boton>}
                </div>
              </aside>
            </ContenedorProducto>
          </div>
        </>
      ) : (
        <p>Cargando...</p>
      )}
    </>
  );
};

export default Post;

when i put this code get my a error Invalid time , this error apper like my product dont load in the state in useEffect have delay many second to call the product of the db, how to solve this error? thnks