Hydration issue with remix js

[fatehwaharp]

Following the sample from the Getting Stsrted docs, when using the renderable document generated from buildDocument (generated at remix's loader) , react throw hydration error, and the css styling is not applying,

import {
  buildDocument,
  Easyblocks,
  RenderableDocument,
  ExternalData,
} from "@easyblocks/core";
import { json, LoaderFunctionArgs } from "@remix-run/node";
import { DummyBanner, easyblocksConfig } from "./editor";
import { useLoaderData } from "@remix-run/react";

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const { renderableDocument, externalData } = await buildDocument({
    documentId: "<DOCUMENT ID HERE>",
    config: easyblocksConfig,
    locale: "en-US",
  });
  return json({
    renderableDocument: renderableDocument!,
    externalData: externalData!,
  });
};

export default function Preview() {
  const { renderableDocument, externalData } = useLoaderData<typeof loader>();

  // Deserialize the JSON data
  const deserializedRenderableDocument: RenderableDocument = JSON.parse(
    JSON.stringify(renderableDocument)
  );
  const deserializedExternalData: ExternalData = JSON.parse(
    JSON.stringify(externalData)
  );

  return (
    <Easyblocks
      renderableDocument={deserializedRenderableDocument}
      components={{ DummyBanner }}
    />
  );
}

here is the react hydration error

[fatehwaharp]

Sorry, should've tried to run it in incognito mode first. Chrome plugin named "Surfingkeys" cause the errors. Once disabled, it works out perfectly.