Adding an editor to the User Profile Information form?

Hi, I'm in the process of adding a simple toast-ui editor to the User Profile Information form on an app I'm building. This is a Laravel 9 app using Fortify/Jetstream/Livewire.

The User Profile Information form is a Livewire component and I've inserted the editor via a simple div:

<div class="col-span-6 sm:col-span-4">
    <x-jet-label for="editor" value="{{ __('About') }}" />
    <div id="editor" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm"></div>
    <x-jet-input type="hidden" id="about" wire:model.defer="state.about" />
</div>

As you can see, there is a hidden field with the id about - I set the value of this to the markdown content of the editor as follows in my app.js:

init_about_editor();
function init_about_editor(){
    const editor = new Editor({
        el: document.querySelector('#editor'),
        events: {
            change: function(){
                console.log(editor.getMarkdown());
                document.querySelector('#about').value = editor.getMarkdown();
            }
        },
        height: '250px',
        initialEditType: 'markdown',
        placeholder: 'Write something cool!',
        plugins: [codeSyntaxHighlight],
        hideModeSwitch: true
    });
}

This works and as I type I can see my markdown in the hidden field in the console.

The weird thing is is that when I click 'Save' and use a debugger to see the $input, about is null. However if I convert the hidden field to a text field and type directly into it - I can see it in the $input array just fine. Then if it's still a text field... and I type something into the editor, the text appears to be in the text field as well... but when I click 'Save' and inspect $input - it's null - I don't get it!

Can anyone shed any light on what's going on?