Invalid Hook Call - GetStreamChat API - reactjs

Question

Trying to install the GetStreamChat React JS API but getting:
Invalid hook call. Hooks can only be called inside of the body of a function component.
I followed the debug guide from https://reactjs.org/warnings/invalid-hook-call-warning.htmlbut still unable to figure it out.
The guide lists 3 commons causes but I went through all of them.
Common Cause 1: Mismatching Versions of React and React DOM?
I am using react-dom#16.13.1
Common cause 2: Breaking the Rules of Hooks?
This is how I'm implementing the functional component:
chatbox.js -> this is straight copied and pasted from their API tutorial guide. It works in an app all by itself.
import React from 'react';
import { Chat, Channel, ChannelHeader, Window } from 'stream-chat-react';
import { MessageList, MessageInput, MessageLivestream } from 'stream-chat-react';
import { MessageInputSmall, Thread } from 'stream-chat-react';
import { StreamChat } from 'stream-chat';
import 'stream-chat-react/dist/css/index.css';
const chatClient = new StreamChat('XYZ');
const userToken = 'XYZ';
chatClient.setUser(
{
id: 'crimson-rice-9',
name: 'Crimson rice',
image: 'https://getstream.io/random_png/?id=crimson-rice-9&name=Crimson+rice'
},
userToken,
);
const channel = chatClient.channel('livestream', 'spacex', {
image: 'image here',
name: 'Bruh Goes Boi',
});
const ChatBox = () => (
<Chat client={chatClient} theme={'livestream dark'}>
<Channel channel={channel} Message={MessageLivestream}>
<Window hideOnThread>
<ChannelHeader live />
<MessageList />
<MessageInput Input={MessageInputSmall} focus />
</Window>
<Thread fullWidth />
</Channel>
</Chat>
);
export default ChatBox;
testscreen2.js
import ChatBox from "../Chat/ChatBox"
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2);
const TestPage2 = () => {
return (
<div>
<p>Why you not work</p>
<ChatBox/>
</div>
)
}
export default TestPage2
Common Cause 3: Duplicate React
Running npm ls react produces:
starter-template#1.0.0 /Users/michaelninh/WebstormProjects/Shuriken
└─┬ stream-chat-react#2.2.0
└─┬ react-file-utils#0.3.15
└─┬ react-file-icon#0.2.0
└── react#16.13.1
Since I don't have multiple reacts showing, does this mean I only have one react copy? However when I do the other suggested test, it produces false which the guide says that I have two React copies:
// Add this in node_modules/react-dom/index.js
window.React1 = require('react');
// Add this in your component file
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2);
PRODUCES FALSE
If I do have multiple react copies, I am unsure how to debug since I'm a beginner at this.

Answer 1

Silly me. I installed the package in my project packages folder instead of the the client packages.