Firestore document add not functioning in callback

I'm working on a project where I have to upload a new document to firestore which seems simple enough, however whenever I try to upload any document using .doc.set() or .add() the request doesn't seem to go through to firebase and nothing shows up in my firestore database at all. However, whenever I try to upload something outside of a callback, whether it be on page load with useEffect or stored in an onClick outside of any kind of anonymous function, it goes through just fine. I'm using react-redux-firebase, react-redux, as well as redux-firestore. I have yet to figure out what I'm doing wrong, so if you could point it out that'd be awesome.

This is the component that holds the form to input the information I want to upload:

    const New = ({ createPost }) => {
    const [form, setForm] = useState({
        title: '',
        content: ''
    });

    const handleInput = (field, e, data) => {
        switch (field) {
            case 'title':
                setForm({ ...form, title: e.target.value });
                break;
            case 'content':
                setForm({ ...form, content: data });
                break;
            default:
                return null;
        }
    }

    return (
        <main className='new'>
            <h1>New Post</h1>
            <form id='new-post-form' onSubmit={() => createPost(form)}>

                <fieldset className='new-post-field'>
                    <label htmlFor='title'>Title</label>
                    <input onChange={e => handleInput('title', e)} type='text' name='title' id='new-post-title' placeholder='Title'/>
                </fieldset>

                <fieldset className='new-post-field'>
                    <label htmlFor='content'>Post Content</label>
                    <CKEditor 
                    editor={ ClassicEditor } 
                    onChange={ (e, editor) => {
                        const data = editor.getData();
                        handleInput('content', e, data)
                    }}
                    />
                </fieldset>

                <fieldset className='new-post-field'>
                    <input className='new-form-button' type='submit'/>
                </fieldset>

            </form>
        </main>
    )
}

const mapDispatchToProps = dispatch => ({
    createPost: post => dispatch(createPost(post))
});

export default connect(null, mapDispatchToProps)(New)

The Redux action that takes care of the actual post to firebase:

export const createPost = post => (
    (dispatch, getState, { getFirebase, getFirestore }) => {
        const firestore =  getFirestore();
        const slug = post.title.toString().toLowerCase()
            .replace(/\s+/g, '-')
            .replace(/[^\w-]+/g, '')
            .replace(/--+/g, '-')
            .replace(/^-+/, '')
            .replace(/-+$/, '')
            .substring(0, 75);
        firestore.collection('posts').doc(slug).set({
            ...post,
            slug,
            timeCreated: firestore.FieldValue.serverTimestamp()
        }).then(() => {
            dispatch({ type: 'CREATE_POST', post });
        }).catch(err => {
            dispatch({ type: 'CREATE_POST_ERROR', err })
        });
    }
);