Обновление опоры React с помощью setTimeout ()

Я пытаюсь использовать React впервые и ищу способ поместить содержимое массива, который обновляется новыми данными каждые 4 секунды, в тег H3. Я знаю, что этого можно достичь с помощью vanilla JS, но хочу знать, есть ли хороший и чистый способ сделать это через экосистему React.

В настоящий момент функция запускается, и журнал консоли показывает, что массив обновляется с точными интервалами, однако фактический тег H3 остается пустым.

Я попытался использовать componentHasMounted () и попытался найти способы разместить функцию render () внутри функции Professions (), но не смог найти способ правильно инкапсулировать ее (если это вообще возможно). Я также пытался следовать новому руководству Date () по обновлению визуализированных элементов в документации React, но безрезультатно - я уверен, что это, вероятно, будет ошибкой с моей стороны, но любая помощь со стороны сообщества SO будет рок.

Внимание, для этого я использую приложение create-react-app.

Вот код:

Profession.js

import React, { Component } from 'react';
import './Profession.css';

class Profession extends Component {
  constructor(props) {
      super(props);
      this.state = {profession: professions()};
  }

  render() {
    return (
      <div className = "Profession">
          <div className = "keyboard">
          <h3>{this.state.profession}</h3>
          </div>
      </div>
    );
  }
}

function professions() {
    const professionList = ['Developer', 'Designer'];
    var profession = [];
    for (var i = 0; i < professionList.length; i++) {
        setTimeout(function (i) {
            return function () {
                profession = [];
                profession.push(professionList[i]);
                console.info(profession);
                return profession;
            }
        }(i), 3800*i);
    }
}




export default Profession;

И App.js на всякий случай

import React, { Component } from 'react';
import './App.css';
import Profession from './Profession'

class App extends Component {
  render() {
    return (
      <div className = "App">


        <h1>Sunil<br/>Sandhu</h1>
        <Profession />
      </div>
    );
  }
}

export default App;