Applying Keycloak with typescript into react

[Hans]

Hi. I'm trying to integrate keycloak with my react typescript project but I'm facing some issue now. I'm facing issue with ReactKeycloakProvider from @react-keycloak/web. can anyone could help me out for this issue?

Error

'ReactKeycloakProvider' cannot be used as a JSX component.
Its instance type '{ state: { initialized: boolean; isAuthenticated: boolean; isLoading: boolean; }; componentDidMount(): void; componentDidUpdate({ authClient, initOptions, }: AuthProviderProps<KeycloakInstance>): void; ... 19 more ...; UNSAFE_componentWillUpdate?(nextProps: Readonly<...>, nextState: Readonly<...>, nextContext: any):...' is not a valid JSX element.
Types of property 'refs' are incompatible.
Type '{ [key: string]: import("/Users/sungjaejoo/node_modules/@types/react/index").ReactInstance; }' is not assignable to type '{ [key: string]: React.ReactInstance; }'.
'string' index signatures are incompatible.
Type 'import("/Users/sungjaejoo/node_modules/@types/react/index").ReactInstance' is not assignable to type 'React.ReactInstance'.
Type 'Component<any, {}, any>' is not assignable to type 'ReactInstance'.
Type 'import("/Users/sungjaejoo/node_modules/@types/react/index").Component<any, {}, any>' is not assignable to type 'React.Component<any, {}, any>'.
The types returned by 'render()' are incompatible between these types.
Type 'import("/Users/sungjaejoo/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.ts(2786)

keycloak.js

index.tsx