Recursive tokenizing react component

index.tsx

import React from 'react';

const Color = ({ color }) => <span style={{ color }}>{color}</span>;

const RecursiveText = ({ text }) => {
  const words = text.split(' ');
  const renderWord = (index) => {
    if (index >= words.length) return null;
    const word = words[index];
    if (['red', 'blue', 'green'].includes(word)) {
      return (
        <React.Fragment>
          <Color color={word} />
          {renderWord(index + 1)}
        </React.Fragment>
      );
    }
    return (
      <React.Fragment>
        {word}
        {renderWord(index + 1)}
      </React.Fragment>
    );
  };
  return renderWord(0);
};