How do i get around type 'ForwardRefExoticComponent<RefAttributes<Result>>' is not a valid JSX element type.?

I have a fowardRef with useImperativeHandle but it's giving me the previous type error.

/* parent */
export interface RefHanlder<T> {
  get: () => T
  reset: () => void
}

const ref = useRef<Result | null>(null)

return (
  <Component ref={ref} /> // <-- type 'ForwardRefExoticComponent<RefAttributes<Result>>' is not a valid JSX element type. 
)

/* child component with forwardRef */
export type Result = RefHandler<{
  advanced: boolean
}>

const Component = forwardRef<Result>((_props, ref) => {
  useImperativeHandle(ref, () => ({ ... }))

  return (...)
})

i'm using turborepo & the component lives in the packages folder.
```json
{
"react": "^18.2.0",
"typescript": "^5.2.2"
}