Socket IO client + React Typescript + Context API causing TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

I am using context API to delegate socket io client instance to other child components, once I declare a socket io client instance, react app throws TypeError: Cannot assign to read only property 'exports' of object '#'

import { createContext } from 'react';
import { io } from "socket.io-client";

const socket = io("http://localhost:5000"); // < once this line is added, throws error

export const SocketContext = createContext({});

export function SocketProvider(props: any) {
    return (
        <SocketContext.Provider value={{}}>
            {props.children}
        </SocketContext.Provider>
    )
}