Update Editor Content based on DropDownList Selection

I am trying to create a module that allows users to pre-fill dummy content in an editor based on a selection made in an external DropDownList. In the code provided you can see I am using two components and I can pass the initial state into the editor however once loaded I am unable to update the content in the editor. Additionally I have the change rendering in the page outside of either component. Hitting a wall here. See code below.

<code>

import React from 'react';
import ReactDOM from 'react-dom';
import { DropDownList } from '@progress/kendo-react-dropdowns';
import { Editor, EditorTools, EditorUtils } from '@progress/kendo-react-editor';

const { Bold, Italic, Underline,
    AlignLeft, AlignRight, AlignCenter,
    Indent, Outdent,
    OrderedList, UnorderedList,
    Undo, Redo, Link, Unlink } = EditorTools;

export class SimpleDropDown extends React.Component {
    static displayName = SimpleDropDown.name;

    componentDidMount() {
        let editor = document.getElementsByClassName('k-editor')[0]
        let iFrame = editor.querySelector('iframe')
        iFrame.contentDocument.querySelector('.k-content').setAttribute("style", "font-family: Arial, Helvetica, sans-serif;")
    }

    sports = [
        { text: 'Basketball', id: 1 },
        { text: 'Football', id: 2 },
        { text: 'Tennis', id: 3 },
        { text: 'Volleyball', id: 4 }
    ];
    state = {
        // Since the reference of the initial value is not from the 'sports' collection,
        // 'dataItemKey' have to be set.
        value: { text: 'Football', id: 2 }
    };

    handleChange = (event) => {
        this.setState({
            value: event.target.value
        });
    }

    render() {
        return (
            <>
            <div>
                <div className="example-config">
                    Selected Value: {JSON.stringify(this.state.value)}
                </div>
                <DropDownList
                    data={this.sports}
                    textField="text"
                    dataItemKey="id"
                    value={this.state.value}
                    onChange={this.handleChange}
                />
            </div>
            <div>
                <div className="row">
                    <div className="col-12">
                        <Editor
                            tools={[
                                [Bold, Italic, Underline],
                                [Undo, Redo],
                                [Link, Unlink],
                                [AlignLeft, AlignCenter, AlignRight],
                                [OrderedList, UnorderedList, Indent, Outdent]
                            ]}
                            contentStyle={{ height: 320 }}
                            defaultContent={this.state.value.text}
                            />
                    </div>
                </div>
                </div>
                </>
        );
    }
}

</code>

Thank you in advance for any light you can shed on where I am getting hung up.