Как имитировать прогрес бар при смене стринги?

У меня есть объект со статусами, предположим:

const validationProgressSteps: IterableObject<string[]>  = {
firstStep: ['one', 'two'],
secondStep: ['three', 'four'],
thirdStep: ['five', 'six'],
fourthStep: ['seven', 'eight'],
}

С сервера я получаю эти же статусы, но нужно сначала проверять их на идентичность с "validationProgressSteps", если статус совпадает например с "validationProgressSteps.firstStep" то при каждом совпадении добавлять + в переменую this.progressStatusBar так что бы она в первом шаге не была больше 25 дальше на втором не больше 50, третем 75, четвертом 100. То есть имитировать Прогрес бар по смене статусов файла. Подскажите пожалуйста, как вызвать шаг 2, 3, 4 после первого ?

public handleValidationProgress(status: string, id: number): number {
      const fileInTable: FileTableItem | undefined = this.uploadedFiles.find
      ((item: FileTableItem) => item.fileId === id);
          if(fileInTable) {
            this.validationProgressSteps.firstStep.filter((item: string) => {
              if (status === item) {
                const progressBar = setInterval(() => {
                  if (this.progressStatusBar === 30) {
                    clearInterval(progressBar);
                  } else {
                    this.progressStatusBar += 1;
                  }
                }, 1000);
              }
            });
          }
      return this.progressStatusBar;
    }