I would like to be able to write my own CSS for each page in WordPress using the Gutenberg editor. I have the following code, which displays the field in the editor:

document.addEventListener('DOMContentLoaded', function () {
    var registerPlugin = wp.plugins.registerPlugin;
    var PluginDocumentSettingPanel = wp.editPost.PluginDocumentSettingPanel;
    var Button = wp.components.Button;
    var el = wp.element.createElement;
    var __ = wp.i18n.__;

    function CustomCssPanel() {
        return el(
            PluginDocumentSettingPanel,
            {
                name: 'custom-css-panel',
                title: 'Custom CSS',
                icon: '',
            },
            el(
                'div',
                {},
                __('Add your custom CSS here:', 'text-domain')
            ),
            el(
                'textarea',
                {
                    placeholder: __('CSS', 'text-domain'),
                    onChange: function (event) {
                        console.log(event.target.value);
                    },
                    style: { width: '100%', minHeight: '200px' },
                }
            ),
        );
    }

    registerPlugin('custom-css-panel', {
        render: CustomCssPanel,
    });
});

I have a few questions about this

1. How can I automatically save and click refresh when I write something in the field? The button is inactive even when I write in the field

2. Is it possible to turn the text area into a code field?

3. How can I have the styles entered there output in a tag in the source code of the respective page?