Why is this causing an infinite render loop?

    const query = useQuery({queryKey: ["starter-products"], queryFn: getAllProducts});
    const [indexOfTargetProduct, setIndex] = useState(0);

    useEffect(() => {

    }, []);

    if (query.isLoading) return;
    if (query.isSuccess) {
        setIndex(() => query.data.findIndex(e => e.name === urlParams.itemName));
    }

    const query = useQuery({queryKey: ["starter-products"], queryFn: getAllProducts});
    const [indexOfTargetProduct, setIndex] = useState(0);

    useEffect(() => {

    }, []);

    if (query.isLoading) return;
    if (query.isSuccess) {
        setIndex(() => query.data.findIndex(e => e.name === urlParams.itemName));
    }