custom hook memory leak

Question

I have this hook I created to check the connection of my app. However I am getting this error : Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

import { useEffect, useState, useCallback } from 'react';

export const useIsOnline = () => {
    useEffect(() => {
        checkOnline();
    }, []);

    const [online, setOnline] = useState(true);

    const checkOnline = async () => {
        const url = new URL(window.location.origin);

        try {
            const response = await fetch(url);
            setOnline(response.ok);
        } catch {
            setOnline(false);
        }
    };

    const change = () => {
        setOnline(!online);
    };

    useEffect(() => {
        window.addEventListener('online', () => change());
        window.addEventListener('offline', () => change());
    }, [online, change]);

    return online;
};