LEXA_JA

Тут можно сделать по разному, зависит желаемого результата.
Если все ошибка ловить через интерсептор и вы не хотите дублировать ошибки из разных компонент, то я бы сделал буфер для ошибок по времени. Схема работы такая:
Для каждой ошибки можно получить ключ, для одинаковых ошибок ключ должен быть одинаковым. За основу можно взять код ошибки или что-то в этом роде
При получении ошибки получаем ключ, ключи складываем в Set. Set может быть как глобальный так и ограниченный
Если в Set уже есть такой ключ, то ошибку игнорируем. Опционально можно не игнорировать, а обновлять существующий тост, например показать счетчик
Если ключа нет, то показываем уведомление
Ключи из Set пропадают по таймеру/событию, тут уже как вам удобнее, например можно использовать onClose из react-toastify.

async function clickHandler(event) {
        startLoading();

        try {
            const result = await loadSomething();

            success(result);
        } catch (error) {
             fail(error)
        } finally {
             stopLoading();
        }
    }

Где startLoading и stopLoading показывают\скрывают лоадер, например вставляют img со спинером или переключают класс. Опционально, через fail\success можно показывать дополнительные индикаторы.

Начнем с того, почему так происходит. ref срабатывает каждый раз, когда происходит рендер. Поскольку модалка использует setState, которая вызывает render, который запускает функцию в ref, в массив каждый раз попадает все больше ссылок, с каждым открытием\закрытием модалки. Иногда в ref может быть null, из-за инлайн функции Подробнее.
Однако такой подход в принципе не правильный.
Для управлением состоянием чекбокса, использование ref не принято. Использование ref в React в принципе нежно использовать не очень часто. Правильный подход - использование props: checked\defaultChecked и onChange Формы
Вообще, состояние должно быть в реакте, а реакт сам применяет его на DOM, в это его суть.

Правильный вариант - положить состояние чекбоксов в стейт, в виде массива или Set'а.

state = {
		values: [false, false, false], // Изначально все 3 чекбокса выключены
	};

	onToggleCheckbox = (checked, index) => {
		this.setState(({ values: prevValues }) => {
			const newValues = [...prevValues]; // меняем состояние нужного чекбокса по индексу
			newValues[index] = checked;

			return {
				value: newValues,
			};
		});
	};

	onToggleAll = checked => {
		this.setState(({ values }) => ({
			values: values.map(() => checked),
		}));
	};

Тогда отрисовка чекбоксов:

<div>
    {this.props.checked.map((value, index) => (
      <input
        type="checkbox"
        checked={value}
        key={index}
        onChange={event => this.props.onToggle(event, index)}
      />
    ))}
  </div>

Состояние чекбокса который переключает все остальный вычислимое:

<input type="checkbox" checked={this.props.values.every(value => value)} onChange={event => this.props.onToggleAll(event.target.checked)} />

В сторе лучше держать нормализованные данные, так с ними проще работать. Если дополнительно хранить в сторе отфильтрованные\отсортированные данные, то могут начаться проблемы с их синхронизацией (удалили\изменили один элемент, нужно его же обновить\удалить из отфильтрованных данных).
Фильтрация это по сути бизнес-логика, её лучше сделать отдельно, как функцию от данных и критериев фильтрации. Критерии фильтрации и данные можно хранить в сторе. А в селекторе вызывать эту функцию, дернув данные и критерии фильтрации из стора.