Might it work the way you intend if you make isMounted stateful?

Move this out of the useEffect:

let isMounted = true;

And change to:

const [isMounted, setIsMounted] useState(true);

And change this:

return () => {
  isMounted = false;
};

to:

return () => {
  setIsMounted(false);
};

Issue was with the order of state updates on isLoading and error as well as my conditions for conditional rendering of child components.

In useEffect():

setIsLoading(false);
setError(err.message);
console.log('err', err.message);

In return statement of the component:

  return (
    <>
      {isLoading && <h2>Loading...</h2>}
      {error && <h2>Module not found</h2>}
      {!isLoading && !error && (
      ...
  )

My guess is that once isLoading was set to true the third condition passed before error could be updated since state updates are asynchronous. Fixed this by updating error before isLoading in the catch block and checking for error first in the render.

Fixed useEffect():

 useEffect(() => {
    let isMounted = true;
    const fetchData = async () => {
      try { 
        const res = await fetch(url);
        if (!res.ok) {
          throw Error("Unable to request data for this resource");
        }
        if (isMounted) {
          const data = await res.json();
          if (data.modInfo === null) {
            console.log("found null")
            throw Error("Module not found");
          }
          setmodInfo(data.modInfo);
          setError(null);
          setIsLoading(false);
        }
      } catch(err) {
        setError(err.message);
        console.log(err.message);
        setIsLoading(false);
      }
    };

    fetchData();
    return () => {
      isMounted = false;
    };
  }, [url]);

Fixed return statement:

  return (
    <>
      {error && <h2>Module not found</h2>}
      {isLoading && <h2>Loading...</h2>}
      {!isLoading && !error && (
      ...
)