Why is my this part of the program showing infinite rerenders in react , please check it

When I click the btn, the onclick function is suppose to pass the JSX from a another component, but calls the component 200+ times, and react breaks the operation and shows “React limits too many re-renders leading to an infinite loop”

then code

import React, { useState, useEffect } from "react";
import fetchAPI from "../../utils/fectch-api";
import SearchEl from "../../utils/searchel";

function Search() {
  const [SearchResults, setSearchResults] = useState([]);
  const [query, setQuery] = useState({ query: "" });

  async function showdata() {
    let data;
    data = query.query ? await fetchAPI("hashtag_post", "hashtag", "love") : "";
    console.log(data);
    const dataObj = data.body.edge_hashtag_to_top_posts.edges.concat(
      data.body.edge_hashtag_to_media.edges
    );
    const readableObj = dataObj.map((item) => {
      return {
        comments_disabled: item.node.comments_disabled,
        Pic_dimensions: item.node.dimensions,
        photo_url: item.node.display_url,
        like_count: item.node.edge_liked_by,
        caption: item.node.edge_media_to_caption,
        comment_count: item.node.edge_media_to_comment,
        user_id: item.node.id,
        is_video: item.node.is_video,
        posts_owner: item.node.owner,
        post_shortcode: item.node.shortcode,
        thumbnail_resources: item.node.thumbnail_resources,
      };
    });
    setSearchResults(readableObj);
    console.log(readableObj);
  }

  function handlequerychange(e) {
    setQuery({ [e.target.name]: e.target.value });
  }

  const searchItems = SearchResults.map((item) => {
    console.log(item);
    return <SearchEl obj={item} />;
  });

  return (
    <>
      <div className="sticky top-0 bg-slate-800 rounded-xl flex items-center justify-between gap-2 px-1 mx-4 my-2">
        <button
          onClick={() => {
            showdata();
          }}
          className="w-12 cursor-pointer aspect-square hover:rounded-[100%] hover:bg-slate-600"
        >
          <i className="fa-solid fa-magnifying-glass text-[1.2em"></i>
        </button>
        <input
          className="w-[100%]  text-lg outline-none border-0 bg-slate-800 py-1"
          type="text"
          name="query"
          onChange={handlequerychange}
          placeholder="Search"
        />
      </div>
      <div className="grid grid-cols-3 grid-row-[auto] overflow-y-scroll hide-scrollbar">
        {searchItems}
      </div>
    </>
  );
}

export default Search;

Initially, I am not using the query string because I need to test if it works or not. So please tell me where did the code got so many re-renders from … Thank you!

I was trying to create JSX elements for every object that came from the API but I showed too many references