RangeError：超出最大调用堆栈大小 - 每次编辑代码时都会发生。反应.js

问：

每次我在代码中编辑某些内容时，都会弹出此错误。它消失了，我的代码在我刷新浏览器后工作，然后我的编辑被实现并且工作。但是当我再次编辑某些内容时会出现。我不确定哪个循环是无限的。新反应，请帮忙。这是我的代码：

意外的运行时错误 RangeError：超出最大调用堆栈大小 .................................................................................................

const Products = () => {
  const [data, setData] = useState([]);
  const [cat, setCat] = useState(data);

  let comM = true;

  useEffect(() => {
    const getProducts = async () => {
      const result = await fetch(URL);
      if (comM) {
        setData(await result.clone().json());
        setCat(await result.json());
      }
      return () => {
        comM = false;
      };
    };
    getProducts();
  }, []);

  const ShowProducts = () => {
    return (
      <>
        <div className="buttons d-flex justify-content-center mb-3 pb-3">
          <button className="btn btn-outline-dark me-2">All</button>
          <button className="btn btn-outline-dark me-2">Category 1</button>
          <button className="btn btn-outline-dark me-2">Category 2</button>
          <button className="btn btn-outline-dark me-2">Category 3</button>
          <button className="btn btn-outline-dark me-2">Category 4</button>
        </div>
        {cat.map((product) => {
          return (
            <>
              <div className="col-md-4 mb-2">
                <div class="card" key={product.Id}>
                  <div class="card-body">
                    <h4 class="card-title">{product.Name}</h4>
                    <h5 class="card-subtitle mb-2 text-body-secondary">
                      R {product.Price}
                    </h5>
                    <p class="card-text">Product description goes here.</p>
                    <a href="#" class="card-link">
                      Edit Item
                    </a>
                    <a href="#" class="card-link">
                      Delete Item
                    </a>
                  </div>
                </div>
              </div>
            </>
          );
        })}
      </>
    );
  };

  return (
    <div className="container">
      <div className="row">
        <div className="col-12">
          <h1 className="text-center">Product List</h1>
          <hr />
        </div>
      </div>`your text`
      <div className="row justify-content-center">
        <ShowProducts />
      </div>
    </div>
  );
};