I'm trying to return the same value for every 3 items inside of a function. I'm doing this to align images in rows of cards by giving a certain height to each row of 3 each 3 card would have the same height than the next three will have the same etc.

  const handleHeadline = (): string => {
    const lineHeight: number = parseInt(headlineRef.current?.style?.lineHeight, 10)
    const lineBreaks = headlineRef.current?.offsetHeight / lineHeight

    if (lineBreaks === 1) {
      return '40px'
    }
    if (lineBreaks === 2) {
      return '60px'
    }
    if (lineBreaks === 3) {
      return '80px'
    }
    if (lineBreaks === 4) {
      return '100px'
    }
    return ''
  }

This function runs inside of the mapped row of cards. The maps run through up to 3 items for each row.

    {rows.slice(0, rowCount || rows.length).map((row, i) => (
        <OuterContainer key={uuidv4()}>
          <Container>
            {row.map(
              (card: OpenGraphCardProp, idx: number) =>
                (card?.headline || card?.image) && (
                  <OpenGraphCard
                    id={idx + 1 || card.id}
                    headline={card.headline}
                    image={card.image}
                    subline={card.subline}
                    name={card.name}
                    link={card.link}
                    key={`${card.id}-${uuidv4()}`}
                    linkText={card.linkText}
                    baseUrl={baseUrl}
                  />
                )
            )}
          </Container>
          {i < rows.length - 1 ? (
            <DividerContainer>
              <Divider />
            </DividerContainer>
          ) : null}