I am using typescript with react and I am trying to unsubsribe an observer from firestore it works when I use it in js but not when I use in typescript how do I do this correctly. Here is my code

const notifications = collection(db, USER_ID_STRING, 'dfgdfg', NOTIFICATIONS_STRING);
    const loadAlerts =useCallback( () => {
        const alertNotifcationsObserver = onSnapshot(notifications, (querySnapshot) => {
            const alertData: any[] = []
            querySnapshot.forEach((doc) => {
                alertData.push({
                    ...doc.data(),
                    
                })
            });
            setAlertNotifcations(alertData)
        });
        return alertNotifcationsObserver
    },[notifications])


    useEffect(() => {
        loadAlerts();
    
        return ()=>loadAlerts()
    }, [loadAlerts]);

here is my error

Argument of type '() => () => Unsubscribe' is not assignable to parameter of type 'EffectCallback'.
  Type '() => Unsubscribe' is not assignable to type 'void | Destructor'.
    Type '() => Unsubscribe' is not assignable to type 'Destructor'.
      Type 'Unsubscribe' is not assignable to type 'void | { [UNDEFINED_VOID_ONLY]: never; }'.
        Property '[UNDEFINED_VOID_ONLY]' is missing in type 'Unsubscribe' but required in type '{ [UNDEFINED_VOID_ONLY]: never; }'.ts(2345)
index.d.ts(58, 34): '[UNDEFINED_VOID_ONLY]' is declared here.
board.tsx(69, 15): Did you mean to call this expression?