so I know I can use useMemo() or shouldComponentUpdate() to stop unnecessary re-renders in React, but I'm unsure as to why things aren't working well in my case. I very much appreciate any help

To keep it short and sweet, I have a list that I want to render out, and am pushing child components into that list that I'm slicing to paginate. I do not want the child components (Member) to update when I paginate the entire list, but I do want the list to still be sliceable in order to paginate through the different team members. Currently, when I try to paginate while using the existing setup below, it does not work. However, if I remove shouldComponentUpdate(), it will paginate, but also trigger a re-render of the child components. I simply want the slice targets to change and render difference indices of the list without causing re-renders of each Member.

Sorry if that was confusing to understand- totally makes sense in my head, but probably not on paper.

Below is only the necessary code:

const BuildTeams = ({team}) => {

const [currentIndex, setCurrentIndex] = useState(0)

const teamList = []

for (var i = 0; i < 8; i++) {
teamList.push(
   <div key={someUniqueID}>
     <Member />
   </div>
   );
 }

// Function used to change state/paginate
function handleChangeIndex(targetInd) {
const target = currentIndex + targetInd;
if (target >= teamList.length) {
    setCurrentIndex(0)
} else setCurrentIndex(target)
}

return <div>
{teamList.slice(currentIndex,currentIndex+1)}
{teamLength > 1 && <button id="arrow" onClick={()=>{handleChangeIndex(1)}}>VIEW MORE/></button>}
</div>;
};

export default BuildTeams;

The child component:

class Member extends Component {

shouldComponentUpdate() {
  return false;
}

render() {
 return (
   <div>
     <img src={`/images/img_${Math.floor(Math.random() * 30) + 1}.jpg`}/>
   </div>
 )
}

export default Member;