TypeScript Parsing Error with JSX Element in Object - React with TypeScript

Question

I'm working on a React project with TypeScript and encountering a parsing error when trying to include a JSX element (an icon from the React-Icons library) within an object. This object is part of a discriminated union type. The error occurs when I define the object containing the JSX element.

Part of the Discriminated Union Type:

type InputField =
  // ... other parts of the union ...
  | {
      key: string;
      type?: "button" | "submit" | "reset";
      innerText: string;
      icon?: JSX.Element;
      group: number;
      element: "button";
      event: (e: React.MouseEvent<HTMLButtonElement>) => void;
    };

The Import:

import { HiArrowLongRight } from 'react-icons/hi2';

The Actual Object:

const fieldObject = {
  key: `existingClient`,
  type: `button`,
  innerText: "Next Step",
  icon: <HiArrowLongRight />,
  group: 3,
  element: "button",
  event: () => {},
};

The Error:

Parsing error: '>' expected.eslint type HiArrowLongRight = /*unresolved*/ any

The Rendering:

                  case "button":
                    return (
                      <button onClick={field.event} type={field.type}>
                        {field.innerText}
                        {field.icon && <span className={styles.icon}>{field.icon}</span>}
                      </button>
                    );

This object is defined within a custom hook.

I've tried various ways to resolve this, such as using a function to return the JSX element, but the error persists. It seems like TypeScript is not correctly parsing the JSX element within the object.

How can I correctly include a JSX element from the React-Icons library in an object without encountering this parsing error?

To resolve the ESLint parsing error, I attempted several approaches:

1. Changing the icon Type: I experimented with altering the type of the icon property in my type definition to various types such as JSX.Element, ReactNode, and ReactElement. Unfortunately, none of these changes resolved the ESLint error.

2. Inspecting the Library: Upon further investigation of the react-icons library on GitHub, I noticed that the components (like HiArrowLongRight) are of SVG file type. This led me to believe that the issue might be related to how ESLint interprets the SVG component within a TypeScript object.

Despite these attempts, I am still encountering the same ESLint error. My expectation was that adjusting the type of the icon property would allow ESLint to correctly parse the JSX element within the TypeScript object. However, this has not been the case, and the error persists.