next js 12.2 visually hidden component causing other third party widget to load on dom

Question

hey guys In my company Next.js 12.2 app there is one visually hidden component which takes child and all my other components inside it as children. now this visually hidden component is causing issue and letting other widget like(amazon pay button, snap finance button) to render on screen. on console it throw error say cannot create another shadow root element. but I remove that visually hidden component it works perfectly fine.

after some googling I find out the previous developer use that for Seo purpose but what should I do now.

this is my code structure.

import dynamic from "next/dynamic";
import { Persistor } from "redux-persist";
import VisuallyHidden from "./visually-hidden";

type Props = {
  children: React.ReactNode | React.ReactNode[];
  persistor: Persistor;
};

const PersistGateComponent = dynamic(() =>
  import("redux-persist/integration/react").then((mod) => mod.PersistGate)
);

// const SSROutset = ({ children, persistor }: Props) => {
//   if (typeof window !== "undefined") {
//     return (
//       <PersistGateComponent persistor={persistor}>
//         {children}
//       </PersistGateComponent>
//     );
//   }
//   return <VisuallyHidden>{children}</VisuallyHidden>;
// };

const SSROutset = ({ children, persistor }: Props) => {
  return (
    <>
      <PersistGateComponent persistor={persistor}>
        {children}
      </PersistGateComponent>
    </>
  );
};

export default SSROutset;

I commented the above VisuallyHidden component. the code inside that VisuallyHidden is here.

    /**
 * Welcome to @reach/visually-hidden!
 *
 * Provides text for screen readers that is visually hidden.
 * It is the logical opposite of the `aria-hidden` attribute.
 *
 * @see https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 * @see https://a11yproject.com/posts/how-to-hide-content/
 * @see Docs     https://reach.tech/visually-hidden
 * @see Source   https://github.com/reach/reach-ui/tree/main/packages/visually-hidden
 */

import * as React from "react";

/**
 * VisuallyHidden
 *
 * Provides text for screen readers that is visually hidden.
 * It is the logical opposite of the `aria-hidden` attribute.
 */
const VisuallyHidden = React.forwardRef<any, any>(function VisuallyHidden(
  { as: Comp = "div", style = {}, ...props },
  ref
) {
  return (
    <Comp
      ref={ref}
      style={{
        top: 0,
        left: 0,
        border: 0,
        clip: "rect(0 0 0 0)",
        height: "1px",
        margin: "-1px",
        overflow: "hidden",
        padding: 0,
        position: "absolute",
        width: "1px",
        // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
        whiteSpace: "nowrap",
        wordWrap: "normal",
        ...style,
      }}
      {...props}
    />
  );
});
VisuallyHidden.displayName = "VisuallyHidden";

/**
 * @see Docs https://reach.tech/visually-hidden#visuallyhidden-props
 */
interface VisuallyHiddenProps {
  /**
   * @see Docs https://reach.tech/visually-hidden#visuallyhidden-children
   */
  children: React.ReactNode;
}

////////////////////////////////////////////////////////////////////////////////
// Exports

export type { VisuallyHiddenProps };
export default VisuallyHidden;

please guys do help, and there is one more issue, when visually hidden component is not there that it does not h1 div and other elements when I do inspect element.