add fragment wrapper on component

[sl45sms]

Typescript complains with "cannot be used as a JSX component" because it thinks that component returns multiply elements. By just adding parenthesis around return, problem solved.

[nkbt]

I have never had this issue. I am not using typescript for my code. This needs to be solved on typescript, not in the source code.

[sl45sms]

@nkbt Thanks for your prompt response. The error I've got. Is:

'DebounceInput' cannot be used as a JSX component.
  Its instance type 'DebounceInput<HTMLInputElement, { className: string; placeholder: string; minLength: 8; debounceTimeout: 500; onChange: (event: ChangeEvent<HTMLInputElement>) => Promise<...>; }>' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/mitroa-ui/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.ts(2786)

You are right, probably the issue comes, deep down, from types of react-transition-group or even from outdated React Types, but anyway is good to surround the createElement. This way you can be sure you are returning a single element. So, if it works for you, you can merge, or drop.

By the way, just for reference, I can bypass the above by overload the types with any. const MyDebounceInput: any = DebounceInput;

[nkbt]

It is not good at all to surround normal function that returns one element with parens just because TS somehow does not like it. I am not supporting and not maintaining TS in any of my repos and I do not write TS in any of my personal projects.