jsx tagged template for inline text

jsxt.tsx

/**
 * @example
 *
 *      const red = (text) => <span style={{ backgroundColor: 'red', color: 'white', padding: '8px' }}>{text}</span>;
 *
 *      return (
 *        <>
 *          {jsxt`Displaying some ${red('red text')} here`}
 *        </> 
 *      );
 */
export const jsxt = (strings: TemplateStringsArray, ...holes: React.ReactNode[]) => {
  const elements = [] as React.ReactNode[];
  let currentIndex = 0;
  let accumulationString = "";

  while (currentIndex < strings.length) {
    accumulationString += strings[currentIndex];

    const nextHole = holes[currentIndex];

    if (typeof nextHole === "string" || typeof nextHole === "number") {
      accumulationString += nextHole;
    } else {
      elements.push(accumulationString);
      if (nextHole) elements.push(nextHole);
      accumulationString = "";
    }

    currentIndex++;
  }

  return <>{elements}</>;
};