How can I clear listener from other listeners?

[tal-rofe]

For example, I have some notification mechanism. When clicking on a button, I want to show the notification (some UI).
The notification should be closed after a timeout, for example 8 seconds. But it can also be closed manually by clicking some "X" ui element.

Implementation:

import { clearAllListeners, createListenerMiddleware } from '@reduxjs/toolkit';

import { uiActions } from '../reducers/ui';
import { NOTIFICATION_SHOW_TIMEOUT } from '../models/ui';
import type { AppState } from '../app';

const listenerMiddleware = createListenerMiddleware();

listenerMiddleware.startListening({
	actionCreator: uiActions.closeNotification,
	effect: (_, listnerApi) => {
		console.log('BYE');

		listnerApi.dispatch(clearAllListeners());
	},
});

listenerMiddleware.startListening({
	actionCreator: uiActions.showNotification,
	effect: async (_, listnerApi) => {
		const originalState = listnerApi.getOriginalState() as AppState;

		if (
			!!originalState.ui.notificationType &&
			!!originalState.ui.notificationTitle &&
			!!originalState.ui.notificationMessage
		) {
			return;
		}

		console.log('DELAYING');

		await listnerApi.delay(NOTIFICATION_SHOW_TIMEOUT);

		console.log('FINISHED DELAY');

		listnerApi.dispatch(uiActions.closeNotification());
	},
});

export default listenerMiddleware;

My target is, if someone clicked the button, so I need to show the notification.
And then to trigger a timeout to remove the notification after 8 seconds.
That's my second listeners implementation.

And first listener: If notification is closed, I need to cancel the second one listener.
But it does not work.

IF I close the notification, the second listener won't stop though the fact I coded: listnerApi.dispatch(clearAllListeners());
So where am I wrong?

Also please note that I don't want the second listener to be removed, I only want to cancel active running

So basically, I get DELAYING printed, then BYE but the ALSO FINISHED DELAY. I expect the last no to be printed