Javascript – getting too many re-renders in react

I have a React component named Search where I’m iterating over data items and rendering a SearchCard component for each item. The SearchCard component contains logic for handling play and pause actions. I’ve noticed that the console log in the SearchCard component is being triggered multiple times, and there are also multiple fetch requests being made.

// SearchCard.jsx
import { useDispatch } from "react-redux";
import { Link } from "react-router-dom";
import PlayPause from "./PlayPause";
import { playPause, setActiveSong } from "../redux/features/playerSlice";
import { useEffect, useState } from "react";

const SearchCard = ({ song, i, isPlaying, activeSong, data }) => {
  const dispatch = useDispatch();

  console.log('heyyy!'); // This log statement is appearing multiple times

  const handlePauseClick = () => {
    dispatch(playPause(false));
  };

  const handlePlayClick = () => {
    dispatch(setActiveSong({ data, song, i }));
    dispatch(playPause(true));
  };

  // ... rest of the component

  return (
    // ... component JSX
  );
};

export default SearchCard;

// Search.jsx
import React from 'react';
import { useSelector } from 'react-redux';
import { useParams } from 'react-router-dom';
import { Error, Loader, SearchCard } from '../components';
import { useGetSongsBySearchQuery } from '../redux/services/shazam';

const Search = () => {
  const { searchTerm } = useParams();
  const { activeSong, isPlaying } = useSelector((state) => state.player);
  const { data, isFetching, error } = useGetSongsBySearchQuery(searchTerm);

  const songs = data?.tracks?.map((song) => song.data);

  if (isFetching) return <Loader title={`Searching ${searchTerm}...`} />;

  if (error) return <Error />;

  return (
    <div className="flex flex-col">
      <h2 className="font-bold text-3xl text-white text-left mt-4 mb-10">
        Showing results for <span className="font-black">{searchTerm}</span>
      </h2>

      <div className="flex flex-wrap sm:justify-start justify-center gap-8">
        {songs.map((song, i) => (
          <SearchCard
            key={song.id}
            song={song}
            isPlaying={isPlaying}
            activeSong={activeSong}
            data={data.tracks}
            i={i}
          />
        ))}
      </div>
    </div>
  );
};

export default Search;

Expected Behavior: I expect the SearchCard component to log only once and fetch data once per rendered instance. However, it seems to be logging and fetching data multiple times, leading to unexpected behavior.