A plugin I'm developing registers two custom post types: Class and Student. Both are connected via the post_parent property in the Student post type (one student belongs to one class). I added a SelectControl control to the PluginDocumentSettingPanel in the Student post type edit screen to be able to set a Class for the Student. Everything is working except the saving part. The changes are not saved. Any ideas?

Thanks in advance

const { __ } = wp.i18n;
const { compose } = wppose;
const { registerPlugin } = wp.plugins;
const { SelectControl } = wpponents;
const { PluginDocumentSettingPanel } = wp.editPost;
const { withSelect, withDispatch } = wp.data;

const applyWithSelect = withSelect( ( select ) => {
    const {
        getEditedPostAttribute,
        getCurrentPostType
    } = select( 'core/editor' );
    const {
        getEntityRecords
    } = select( 'core' );

    const parent = getEditedPostAttribute( 'parent' );

    const posts = getEntityRecords( 'postType', 'class', { per_page: -1, orderby: 'title', order: 'asc', _fields: 'id,title' } )

    return {
        currentPostType: getCurrentPostType(),
        parent: parent,
        posts: posts
    };
} );

const applyWithDispatch = withDispatch( ( dispatch ) => {
    const { editPost } = dispatch( 'core/editor' );

    return {
        onUpdateParent( value ) {
            editPost( { parent: Number( value ) } );
        },
    };
} );

function StudentOptionsPanelComponent( {
    // These props are passed by applyWithSelect().
    currentPostType, // current post type
    parent, // current value of parent
    posts, // all posts
    // And these are passed by applyWithDispatch().
    onUpdateParent,  // function which updates the meta restrict
} ) {
    if ( 'student' !== currentPostType ) {
        return null;
    }

    if ( ! posts ) {
        return __( 'Loading...', 'my-plugin' );
    }

    if ( posts.length === 0 ) {
        return __( 'No classes found', 'my-plugin' );
    }

    var options = [];
    options.push( {
        label: __( 'Select a class...', 'my-plugin' ),
        value: ''
    } );

    for ( var i = 0; i < posts.length; i++ ) {
        options.push( {
            label: posts[i].title.raw,
            value: posts[i].id
        } );
    }

    return (
        <PluginDocumentSettingPanel
            name='student-options'
            title={ __( 'Options', 'my-plugin' ) }
            className='student-options-panel'
        >
            <SelectControl
                label={ __( 'Select a class:', 'my-plugin' ) }
                value={ parent }
                options={ options }
                onChange={ onUpdateParent }
            />
        </PluginDocumentSettingPanel>
    );
}

const StudentOptionsPanel = compose(
    applyWithSelect,
    applyWithDispatch
)( StudentOptionsPanelComponent );

registerPlugin( 'student-options-panel', {
    render: StudentOptionsPanel,
} );

UPDATE: The previous code is correct, but one needs to expose the parent field for non-hierarchical post types using the register_rest_field() function (Props to @Sally CJ):

add_action( 'rest_api_init', 'register_parent_rest_field' );
function register_parent_rest_field() {
    register_rest_field( 'student', 'parent', array(
        'schema' => array(
            'description' => __( 'The ID for the parent of the post.' ),
            'type'        => 'integer',
            'context'     => array( 'view', 'edit' ),
        ),
    ) );
}