Cant pass state to a conditional?

Working on an app where you can post your video game clips. Have two fetches for clip data that are the same thing just ordered in two different ways in the backend (default, and most comments). Trying to render the fetches conditionally. Seems to work when I change line 4 to switchFetches === true. But not when I press the button that changes switchFetches to false.

App

const [switchFetches, setSwitchFetches] = useState(true);

  useEffect(() => {
    if (switchFetches === false) {
      fetch("/most_comments")
        .then((r) => r.json())
        .then((data) => setClipData(data));
    } else {
        fetch("/clips")
        .then((r) => r.json())
        .then((data) => setClipData(data));  
    }
  }, []);

ClipList

function onChangeForFilter(e) {
    e.preventDefault();
    setSwitchFetches(false)
  }