Issue <Icons /> cannot be used as a JSX component.

Issue details:

TS2786: 'Gear' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<Props, any, any> | null' is not a valid JSX element.
    Type 'Component<Props, any, any>' is not assignable to type 'Element | ElementClass | null'.
      Type 'Component<Props, any, any>' is not assignable to type 'ElementClass'.
        The types returned by 'render()' are incompatible between these types.
          Type 'React.ReactNode' is not assignable to type 'import("/Users/ducqhle/Documents/_workspace/my-practices/sbox-internal-app/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'.
            Type '{}' is not assignable to type 'ReactNode'.
              Type '{}' is missing the following properties from type 'ReactPortal': key, children, type, props
    25 |           <Col xs={1}>
    26 |             <Stack gap={3}>
  > 27 |               <Gear size={18} />
       |                ^^^^
    28 |               <PeopleFill size={18} />
    29 |               <CheckCircle size={18} />
    30 |             </Stack>

Versions: “react-bootstrap-icons”: “^1.8.2”, “react-bootstrap”: “^2.4.0”, “react”: “18.0.0”,

Can anyone know how can we fix this issue when integrate react-bootstrap-icons with typescript React project?

[dantabel]

+1 I also get this issue in React 17

[dzpt]

i got this error even in react 17 @ismamz

├── react-bootstrap-icons@1.8.4
├── react-bootstrap@2.5.0
├── react@17.0.2
├── @types/react@17.0.48