Showing Its instance type 'DatNumber' is not a valid JSX element. when compile by typescript

[tklee1975]

When I compile my code using tsc, the DatGui showing is not a valid JSX element. the output is like this:

Terminal% tsc
src/containers/Entry.tsx:50:8 - error TS2786: 'DatGui' cannot be used as a JSX component.
  Its instance type 'DatGui' is not a valid JSX element.

50       <DatGui
          ~~~~~~

src/containers/Entry.tsx:62:10 - error TS2786: 'DatNumber' cannot be used as a JSX component.
  Its instance type 'DatNumber' is not a valid JSX element.

62         <DatNumber path="x" label="x" min={0} max={1024} step={1} />
            ~~~~~~~~~

src/containers/Entry.tsx:63:10 - error TS2786: 'DatNumber' cannot be used as a JSX component.
  Its instance type 'DatNumber' is not a valid JSX element.

63         <DatNumber path="y" label="y" min={0} max={1024} step={1} />
            ~~~~~~~~~

src/containers/Entry.tsx:64:10 - error TS2786: 'DatNumber' cannot be used as a JSX component.
  Its instance type 'DatNumber' is not a valid JSX element.

64         <DatNumber path="w" label="w" min={0} max={1024} step={1} />
            ~~~~~~~~~

src/containers/Entry.tsx:65:10 - error TS2786: 'DatNumber' cannot be used as a JSX component.
  Its instance type 'DatNumber' is not a valid JSX element.

[tklee1975]

I solved the above problem by fixing the 'package.json' and reloading the package. It is related to the version mismatch.

Here're the detail steps: Add the following in the package.json:

[solved]
add the follow to package.json
  "resolutions": {
    "@types/react": "17.0.2",
    "@types/react-dom": "17.0.2"
  }

and run yarn again to update the packages and run tsc to test if the problem still exists or not