Typescript: Observer prop type is not extracting

[quolpr]

Giving:

type Props = { note: NoteModel; database: Database; noteId: string };

const NotePageComponent: React.FC<Props> = ({ note }) => {
  const database = useDatabase();
  const history = useHistory();

  return (
    <>
      {note && (
        <Calendar
          onChange={async (date) => {
            if (isArray(date)) return;

            const note = await getOrCreateDailyNote(database, dayjs(date));

            history.replace(`/notes/${note.id}`);
          }}
          value={dayjs(note.title, 'D MMM YYYY').toDate()}
        />
      )}
      <Note noteId={note.id} />
    </>
  );
};

type InputProps = ObservableifyProps<Props, 'note'>;

const NotePageEnch = withDatabase<InputProps>(
  withObservables(['noteId'], ({ database, noteId }: InputProps) => {
    const note = database.collections
      .get<NoteModel>(HarikaNotesTableName.NOTES)
      .findAndObserve(noteId);

    return {
      note,
    };
})(/* error here ->>> */NotePageComponent)
);

I get such typescript error:

TS2345: Argument of type 'FC<Props>' is not assignable to parameter of type 'ComponentType<Matching<ExtractedObservables<{ note: Observable<Note>; }>, Props>>'.
  Type 'FunctionComponent<Props>' is not assignable to type 'FunctionComponent<Matching<ExtractedObservables<{ note: Observable<Note>; }>, Props>>'.
    Types of property 'propTypes' are incompatible.
      Type 'WeakValidationMap<Props> | undefined' is not assignable to type 'WeakValidationMap<Matching<ExtractedObservables<{ note: Observable<Note>; }>, Props>> | undefined'.
        Type 'WeakValidationMap<Props>' is not assignable to type 'WeakValidationMap<Matching<ExtractedObservables<{ note: Observable<Note>; }>, Props>>'.
          Types of property 'note' are incompatible.
            Type 'Validator<Note> | undefined' is not assignable to type 'Validator<Observable<Note>> | undefined'.
              Type 'Validator<Note>' is not assignable to type 'Validator<Observable<Note>>'.
                Type 'Note' is not assignable to type 'Observable<Note>'.
Version: typescript 4.0.5

Typescript version 4.0.5

[blixit]

I'm getting the same issue but with a different pattern

import {Database} from '@nozbe/watermelondb';
import {withDatabase} from '@nozbe/watermelondb/DatabaseProvider';
import withObservables, {ExtractedObservables} from '@nozbe/with-observables';
import React from 'react';
import {withTheme} from 'react-native-paper';
import {Theme} from 'react-native-paper/lib/typescript/types';
import {Observable} from 'rxjs';

import {AnonymousRoute} from '../screen/navigator.types';

import { AndonSubmission } from './model/andonSubmission';

export interface WithObservablesInput {
  database: Database;
  route: AnonymousRoute<{id: string}>;
  theme: Theme;
}

export function withTRDOInjected<ObservablesProps>(
  WrappedComponent: React.FC<WithObservablesInput & ExtractedObservables<ObservablesProps>>,
  deps: Array<keyof WithObservablesInput>,
  getObservables: (props: WithObservablesInput) => ObservablesProps,
) {
  const observe = withObservables(deps, getObservables);

  return withTheme(withDatabase(observe(WrappedComponent))); // <<--- KO
}

Here is the result:

But if I replace the generic type with a known type it works perfectly ...

Anyway, in both cases, my component is properly injected without typescript error:

I know I'm close to the result ... but I don't know how to bypass this typescript error

[mlecoq]

Same issue and it was due to 2 versions of RxJS in my dependencies : WatermelonDB used 7.x and WithObservables 6.x

Adding

  "resolutions": {
    "rxjs": "^7.3.0"
  },

solves the issue