Uncaught TypeError: Cannot destructure property ‘children’ of ‘_ref’ as it is undefined in Context

I created Context to store my user login info and other details but i am getting error
Uncaught TypeError: Cannot destructure property ‘children’ of ‘_ref’ as it is undefined.

I don’t know why this is giving error i read from some article that this children variable is null while i am accessing it, I am not sure about the error and how to fix it.
Please help me fix it.

Here is my Context File

import { createContext, useContext, useEffect, useState } from "react";
import { useHistory } from "react-router-dom";

const ChatContext = createContext();

const ChatProvider = ({children})=>{
    // {children ='empty'}=children||
    const history = useHistory();

    const [user,setUser] = useState();
    const [selectedChat,setSelectedChat] = useState();
    const [chats,setChats] = useState([]);

    useEffect(()=>{
        const userInfo = JSON.parse(localStorage.getItem("userInfo"));
        setUser(userInfo);
        if(!userInfo){
            history.push('/')
        }
    },[history]);

    return(
        <ChatContext.Provider value={{user,setUser,selectedChat,setSelectedChat,chats,setChats}}>
            {children}
        </ChatContext.Provider>
    )
};

export const ChatState=()=>{
    return useContext(ChatContext);
}

export default ChatProvider

Here is the File which is giving error upon accessing this Context

import React from 'react'
import ScrollableFeed from "react-scrollable-feed";
import { isLastMessage, isSameSender } from '../config/ChatLogic';
import ChatState from "../Context/ChatProvider"
import { Avatar, Tooltip } from '@chakra-ui/react'

const ScrollableChat = ({ messages }) => {
    console.log(messages);
    const { user } = ChatState();
    console.log(user);

    return (
        <ScrollableFeed>
            {messages &&
                messages.map((message, i) => (
                    <div style={{ display: "flex" }} key={message._id}>
                        {(isSameSender(messages, message, i, user._id) ||
                            isLastMessage(messages, i, user._id)) && (
                                <Tooltip label={message.sender.name} placement="bottom-start" hasArrow>
                                    <Avatar
                                        mt="7px"
                                        mr={1}
                                        size="sm"
                                        cursor="pointer"
                                        name={message.sender.name}
                                        src={message.sender.pic}
                                    />
                                </Tooltip>
                            )}
                    </div>
                ))}
        </ScrollableFeed>
    )
}

export default ScrollableChat;