zChat.sendOfflineMsg Cannot read properties of undefined

Hello!

I am in process of converting the sample web sdk react application from class components to functional components in hopes that we can use it for a proof of concept. (just a little background here)

So everything has gone pretty smooth until I get to this sendOfflineMsg function that is part of zChat, it seems to work fine from the class components, but says it's undefined when I try to send a message. 

I have imported zChat from the web-sdk, this method seems to work on other components.   I have also noticed the zChat.EMAIL_REGEX is also undefined, which makes me think that zChat is not really there after all... some things have been removed to simplify testing... (form validation for one, I'll write my own).

Included is the code for your review.. any legitimate input welcome. 

import React, {useState} from 'react';
import PropTypes from 'prop-types';
import CardContainer from "./CardContainer";
import MessageSvg from "./MessageSvg";
import ActionButton from "./ActionButton";
import {zChat} from "../vendor/web-sdk";

function OfflineForm() {
    const [name, setName] = useState("test");
    const [email, setEmail] = useState("test@email.com");
    const [message, setMessage] = useState("test");
    const [sent, setSent] = useState(false);

    const onSubmit = (e) => {
        e.preventDefault();

        // check validation
       zChat.sendOfflineMsg({
            name: name,
            email: email,
            message: message
        }, (err) => {
            if (err) return;
            setSent(true);
        });

    }

    const sendAnother = () => {
        setSent(false);
    }

    const renderChild = () => {
        if (sent) {
            return (
                <div key="sent" className="offline-sent">
                    Your message has been sent. We will get back to you as soon as possible.
                    <ActionButton
                        addClass="button-resend"
                        label="Send another"
                        onClick={sendAnother}
                    />
                </div>
            );
        } else {
            return (
                <form onSubmit={(e) => onSubmit(e)} key="not-sent" className="offline-form">
                    <div className="content">
                        <div className="section">
                            <label className="label">Name</label>
                            <input value={name} maxLength="255" onChange={(e) => setName(e.target.value)} />
                        </div>
                        <div className="section">
                            <label className="label">Email</label>
                            <input value={email} onChange={(e) => setEmail(e.target.value)} />
                        </div>
                        <div className="section">
                            <label className="label">Message</label>
                            <textarea value={message} required id="message" onChange={(e) => setMessage(e.target.value)} />
                        </div>
                    </div>
                    <div className="button-container">
                        <button type="submit" className="button-send">
                            Send
                        </button>
                    </div>
                </form>
            );
        }
    }
    return (
        <CardContainer addClass="offline-card" contentAddClass={sent ? 'sent' : ''} icon={<MessageSvg />}>
            {renderChild()}
        </CardContainer>
    );
}


OfflineForm.propTypes = {

};

export default OfflineForm;