Как изменить количество после каждого сопоставленного элемента в реакции?

Question

У меня проблемы с реализацией этого с помощью React, я постараюсь объяснить это как можно лучше.

Здесь у меня есть массив чисел stati c, который содержит 3 разных числа, которые мне нужны применить к моему сопоставленному компоненту ( OtherComponent ). Этот код ниже работает, но я думаю, что я использую count ( heightCount ) и мой массив stati c ( lineSegmentHeights ) в React.

import React, { Fragment } from "react";
import { OtherCompnonent } from "./OtherComponent";

export const FuncComponent: React.FC<IProps> = (props) => {
  const lineSegmentHeights: number[] = [139, 88, 38];
  let heightCount: number = 0;

  return (
    <Fragment>
      {props.data.map((item, index) => {
        if (heightCount >= 3) {
          heightCount = 0;
        }
        heightCount++;

        return (
          <OtherComponent
            key={`${index - test}`}
            compData={item}
            lineSegmentHeight={
              lineSegmentHeight[minorMilestonesHeightCount - 1]
            }
          />
        );
      })}
    </Fragment>
  );
};

Затем я попытался отследить счет с помощью useState:

import React, { Fragment, useState } from "react";
import { OtherCompnonent } from "./OtherComponent";

export const FuncComponent: React.FC<IProps> = (props) => {
  const lineSegmentHeights: number[] = [139, 88, 38];
  const [heightCount, setHeightCount] = useState <number> 0;

  return (
    <Fragment>
      {props.data.map((item, index) => {
        if (heightCount >= 3) {
          heightCount(0);
        }
        setHeightCount(heightCount + 1);

        return (
          <OtherComponent
            key={`${index - test}`}
            compData={item}
            lineSegmentHeight={lineSegmentHeight[heightCount - 1]}
          />
        );
      })}
    </Fragment>
  );
};

, что вызывает много ошибок рендеринга жизненного цикла.

Мои основные вопросы: как мне правильно хранить этот массив значений stati c, который никогда не изменится? Также, как мне правильно контролировать счет с реакции, чтобы первый сопоставленный компонент получил lineSegmentHeight === 139, следующий получил lineSegmentHeight === 88, следующий получил 38, следующий получил 139, следующий получил 88 .... et c.

Пожалуйста, дайте мне знать, если я смогу объяснить что-нибудь дальше или лучше, большое спасибо за ваше время. Любая помощь приветствуется. Удачного кодирования!