Gutenberg Edit Block Inspector Controls and save

I am looking to edit an existing block to add inspector controls that save as meta data. I have been beating my head trying to find how to save the data. The following code adds a text field to the inspector system . I can add the field but for some reason the field does not save. I can not for the life of me figure it out.

var el = wp.element.createElement,
    Fragment = wp.element.Fragment
    registerBlockType = wp.blocks.registerBlockType,
    RichText = wp.editor.RichText,
    BlockControls = wp.editor.BlockControls,
    AlignmentToolbar = wp.editor.AlignmentToolbar,
    Fields = wp.components;

var withInspectorControlsEdit = wp.compose.createHigherOrderComponent( function( BlockEdit ) {
    return function( props ) {
        return el(
            wp.element.Fragment,
            {},
            el( BlockEdit, props ),
            el(
                wp.editor.InspectorControls,
                {},
                el(
                    Fields.PanelBody,
                    {},
                    el(
                        Fields.TextControl,
                        {
                            label: 'Test Field',
                            value: props.attributes.testField,
                            onChange: function(e){
                                props.setAttributes({ testField: e });
                            }
                        }
                    )
                )   
            )
        )
    };
}, 'withInspectorControlsEdit' );
wp.hooks.addFilter( 'editor.BlockEdit', 'acf/accordion', withInspectorControlsEdit );