Invalid hook call. and Cannot read properties of null (reading 'useState')

Question

So there is the stream-chat function and I got the error above. And I include everything right. And I can't find the problem. Also, I'm using the latest react and I upgraded it too so everything should be fine. There is an invalid hook call but idk where it before they cannot read null so mostly that's the problem Here is the full code:

const user = {
  id: "igen",
  name: "admin",
  image: "https://getstream.imgix.net/images/random_svg/FS.png",
};

const filters = { type: "messaging", members: { $in: [user.id] } };
const sort = { last_message_at: -1 };

const Users = () => {
  const { client } = useChatContext();
  const { channel } = useChannelStateContext();
  const [channelUsers, setChannelUsers] = useState([]);

  useEffect(() => {
    const updateChannelUsers = (event) => {
      if (!event || channel.state.members[event.user.id] !== undefined) {
        setChannelUsers(
          Object.values(channel.state.members).map((user) => ({
            name: user.user_id,
            online: user.user.online,
          }))
        );
      }
    };

    updateChannelUsers();

    client.on("user.presence.changed", updateChannelUsers)

    return () => {
      client.off("user.presence.changed", updateChannelUsers)
    };
  }, [client, channel])

  return (
    <ul className="users-list">
      {channelUsers.map((member) => (
        <li key={member.name}>
          {member.name} - {member.online ? "online" : "offline"}
        </li>
      ))}
    </ul>
  );
}

export default function UserChat() 
{
  console.log("Before useEffect");
   const [channel, setChannel] = useState(null)
   const [client, setClient] = useState(null)
  useEffect(() => {
   
 
    async function init() {
      console.log("After useEffect");
      const chatClient = StreamChat.getInstance(apiKey);

      await chatClient.connectUser(user, chatClient.devToken(user.id));

      const newChannel = chatClient.channel("messaging", "chat", {
        image: "https://www.drupal.org/files/project-images/react.png",
        name: "Segíthetek?",
        members: [user.id],
      });

      await newChannel.watch()
      setChannel(newChannel)
      setClient(chatClient)
    }
   
  init()

    if (client) return () => client.disconnectUser()
  }, []);

  if (!channel || !client) return <LoadingIndicator />;

  return (
    <Chat client={client} theme="messaging dark">
      <ChannelList 
      filters={filters} 
      sort={sort} `
      <Channel>
        <Window>
          <Users />
          <ChannelHeader />
          <MessageList />
          <MessageInput />
        </Window>
        <Thread />
      </Channel>
    </Chat>
  );
};`

I tried almost everything that I found online, also the api is working fine and I am already in touch with their support. So I don't think so its the stream-chat more like the react.