Generic Component in React – Type is not assignable to type 'ReactNode'. But no error with JSON.stringify()

I’m trying to create a generic component in React TypeScript. Here is the code

interface Props<T> {
    name: T;
}

function CheckChild<T>(props: Props<T>) {
    return <div>My name is {props.name}</div>;
}

export default function Check() {
    const name = "Alex";

    return (
        <div>
            <CheckChild name={name} />
        </div>
    );
}

VS code gives me a type error about props.name:

Type 'T' is not assignable to type 'ReactNode'.
  Type 'T' is not assignable to type 'ReactPortal'.ts(2322)
Check2.tsx(7, 21): This type parameter might need an `extends React.ReactPortal` constraint.
Check2.tsx(7, 21): This type parameter might need an `extends React.ReactNode` constraint.

But if I wrap props.name in JSON.stringify() – type error disappears.

return <div>My name is {JSON.stringify(props.name)}</div>;

Why does this happen?
This topic does not answer my question. I am interested in "Why JSON.stringify removes error"?

>Solution :

The reason why the type error disappears when you wrap props.name in JSON.stringify() is because JSON.stringify() converts the value to a string representation. In TypeScript, the type ReactNode represents the type of a valid React node, which can be a string, a number, a React component, an array, etc.

When you directly use props.name without JSON.stringify(), the TypeScript compiler assumes that the type of props.name should be compatible with ReactNode. However, in your code, you have a generic type T for the name property in the Props interface. The compiler doesn’t have enough information to determine the actual type of T, so it gives a type error.

By using JSON.stringify(props.name), you explicitly convert the value to a string, which satisfies the ReactNode type requirement. This makes the type error disappear because JSON.stringify() always returns a string, and a string is a valid type for ReactNode.

If you want to avoid using JSON.stringify(), you can provide a more specific type constraint for the T generic in the Props interface. For example, if you know that props.name will always be a string, you can update the Props interface like this:

interface Props<T extends string> {
   name: T;
}