Getting warning: Invalid hook call and Type error: cannot read properties of null (reading 'useContext') using Material UI component

This is the component:

import React, { useEffect } from "react";
import { useStore } from "../zustand/store";
import shallow from "zustand/shallow";
import Grid from "@mui/material/Grid";

export const JoinChat = () => {
    const [userCount, setUserCount] = useStore(
        (state) => [state.userCount, state.setUserCount],
        shallow
    );
    const setChat = useStore((state) => state.setChat);
    const socket = useStore((state) => state.socket);

    useEffect(() => {
        socket.on("user_count", (data) => {
            console.log("user count run in join chat");
            setUserCount(data);
        });
    }, [socket, setUserCount]);

    const joinChat = async () => {
        if ("geolocation" in navigator) {
            await navigator.geolocation.getCurrentPosition(async (pos) => {
                const location = {
                    x: pos.coords.longitude,
                    y: pos.coords.latitude,
                };
                await socket.emit("create_chat", location);
                setChat(true);
            });
        } else {
            alert("You location is not available");
        }
    };

    return (
        <Grid>
            <div>
                {userCount ? <p>People online {userCount}</p> : null}
                <button onClick={joinChat}>Join chat</button>
            </div>
        </Grid>
    );
};

I get the following error in the console when I use grid to wrap the div: here

It renders fine without warning or error if I get rid of the material UI component