Plasmo rerendering CSUI infinitely and using up PC memory

import React, { useEffect, useRef, type FC } from 'react';

// import './components/SearchResults/SearchResults.scss';
import type { PlasmoCSConfig, PlasmoCSUIJSXContainer, PlasmoCSUIProps, PlasmoGetInlineAnchorList, PlasmoGetRootContainer, PlasmoRender } from 'plasmo';
import rootCss from 'data-text:../root.scss';
import { createRoot } from 'react-dom/client';

export interface SearchResultsProps {
  index?: number; // Add index to the props
  id?: string;
}

const SearchResults = ({ index, id }: SearchResultsProps) => {
  const containerRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    console.log(containerRef.current);
  }, []);

  return <div id={id} ref={containerRef} className={`SearchResults`}>SearchResults (Index: {index})</div>;
}

export default SearchResults;

export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () => {
  // console.log('%c calling getInlineAnchorList', 'color: red; font-weight: bold;');
  const elements = document.querySelectorAll(`[data-testid="regular-listings"] > div  a:first-of-type > div > div:nth-of-type(3) > h2`);
  return elements;
  // return Array.from(elements).map((element, index) => {
  //   element.setAttribute('data-card-id', index.toString());
  //   return {
  //     element,
  //     insertPosition: 'afterend',
  //     props: { index } // Pass the index as a prop
  //   }
  // });
}

export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = `
      ${rootCss}
    `;
  return style;
}

export const getRootContainer = ({ anchor }) => anchor?.element;