Bit confused about the concept with the hooks, I have a component where I have two state variables defined with useState:

Now every time one variable changes, it makes the other variable part in JSX to re-render, since it is a list I want to avoid that to be re-rendered. How can I achieve this?

So, in the example below, whenever, I click on the button, it re-renders the list. How can I stop this

import "./styles.css";
import { Fragment, useCallback, useEffect, useState } from "react";
const App = () => {
  const [repos, setRepos] = useState([]);
  const [count, setCount] = useState(1);
  useEffect(() => {
    const fetchRepos = async () => {
      const response = await fetch("https://api.github.com/repositories");
      const repoDetails = await response.json();
      console.log(repoDetails);
      setRepos([...repoDetails]);
    };
    fetchRepos();
  }, []);
  const handleCount = () => {
    setCount(count + 1);
  };
  return (
    <Fragment>
      <div className="App">
        {repos.map((r) => {
          console.log("render");
          return <li key={r.id}>{r.name}</li>;
        })}
      </div>
      <button onClick={handleCount}>Button {count}</button>
    </Fragment>
  );
};
export default App;