Invalid Hook Call when using NotionRenderer component

[DamienFoulon]

Description

Hello,

I'm using the lib react-notion-x with React v18.2.0.

When I'm using the component NotionRenderer, I got the error Invalid Hook Call

// Libs
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { NotionRenderer } from 'react-notion-x';

// Utils
import axios from '../../utils/axios';

export default function NotionEmbed(props) {
    const { t, i18n } = useTranslation();
    const { notionPageId } = props;
    const [notionContent, setNotionContent] = useState({});

    useEffect(() => {
        axios.post('api/notion', { notionPageId })
            .then(res => {
                setNotionContent(res.data);
            })
            .catch(e => {
                console.log(e);
            });
    }, [notionPageId]);

    useEffect(() => {
        console.log(notionContent);
    }, [notionContent]);

    return (
        <div className="notion-embed">
            <NotionRenderer
                recordMap={notionContent}
                fullPage={true}
                darkMode={false}
            />
        </div>
    );
}

Notion Test Page ID

1a9d25ee18f84b9298a3d1a1e8149863

[DamienFoulon]

I just found the solution, the devDependencies doesn't contains the same react version as mine. I just edited the version to match wwith mine and it's working well.

{
  "name": "react-notion-x",
  "version": "6.16.0",
  "type": "module",
  "description": "Fast and accurate React renderer for Notion.",
  "repository": "NotionX/react-notion-x",
  "author": "Travis Fischer <travis@transitivebullsh.it>",
  "license": "MIT",
  "main": "./build/index.js",
  "module": "./build/index.js",
  "types": "./build/index.d.ts",
  "sideEffects": false,
  "files": [
    "build",
    "src/styles.css"
  ],
  "engines": {
    "node": ">=12"
  },
  "scripts": {
    "build": "tsup",
    "watch": "tsup --watch --silent --onSuccess 'echo build successful'"
  },
  "dependencies": {
    "@fisch0920/medium-zoom": "^1.0.7",
    "@matejmazur/react-katex": "^3.1.3",
    "katex": "^0.15.3",
    "notion-types": "^6.16.0",
    "notion-utils": "^6.16.0",
    "prismjs": "^1.27.0",
    "react-fast-compare": "^3.2.0",
    "react-hotkeys-hook": "^3.0.3",
    "react-image": "^4.0.3",
    "react-lazy-images": "^1.1.0",
    "react-modal": "^3.14.3",
    "react-pdf": "^5.7.1",
    "react-use": "^17.3.1"
  },
  "devDependencies": {
    "@types/lodash.throttle": "^4.1.6",
    "@types/node": "^16.11.2",
    "@types/react": "^17.0.31",
    "clipboard-copy": "^4.0.1",
    "date-fns": "^2.28.0",
    "format-number": "^3.0.0",
    "lodash.throttle": "^4.1.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "peerDependencies": {
    "react": ">=16",
    "react-dom": ">=16"
  },
  "gitHead": "2a48b29554b4ecf3cf49db808c8660726717e255"
}