Is it possible to use JS to set the value of a React + downshift autocomplete dropdown?

Question

OBJECTIVE

I'm a support agent trying to create a Chrome Extension to automate the filling out of Zendesk forms to make my job easier. I'm using the console at the moment.

SITUATION

Unfortunately, Zendesk uses React + downshift, which is complicating things as I am a newb at React and never used downshift. When I try to do it using normal means like changing the .value property and then dispatching events, the value change never registers.

WHAT I'VE TRIED

First of all, I simulate a click on the outer container, which opens the dropdown as expected.

• Different combinations of dispatched events like first input, then change
• Typing in the text by using keydown events to input the letters one by one
• Using the blur event
• Simulating a click on the actual input itself after the first simulated click on the parent
• Both focusing on the input itself and not

FORM ELEMENT HTML

<div id="ember3412" class="ember-view">
    <!---->
    <div data-garden-id="forms.field" data-garden-version="8.74.3" data-test-id="ticket-form-field-dropdown-field-29533817" aria-describedby="7val-tooltip_1.0.6" data-garden-container-id="containers.tooltip" data-garden-container-version="1.0.6" class="sc-anv20o-3 gAALKx StyledField-sc-12gzfsu-0 glOpOr">
        <label data-garden-id="forms.input_label" data-garden-version="8.74.3" data-garden-container-id="containers.tooltip" data-garden-container-version="1.0.6" id="downshift-5-label" for="downshift-5-input" tabindex="0" aria-describedby="8val-tooltip_1.0.6"
        class="sc-anv20o-4 iIWDoF StyledLabel-sc-2utmsz-0 bYrRLL">HO Assignee*</label>
        <div data-garden-id="dropdowns.faux_input" data-garden-version="8.54.3" aria-invalid="false" aria-disabled="false" aria-haspopup="listbox" data-toggle="true" aria-expanded="false" aria-labelledby="downshift-5-label" data-test-id="ticket-form-field-dropdown-button"
        class="StyledTextInput-sc-k12n8x-0 sc-anv20o-0 kptXaI StyledFauxInput-sc-1l592ed-0 iJWzSI StyledTextFauxInput-sc-yqw7j9-0 gdXore">
            <div data-garden-id="dropdowns.select" data-garden-version="8.54.3" class="StyledSelect-sc-xifmwj-0 eSliJF"><span class="sc-anv20o-1 hGMRMW"><div data-garden-id="typography.ellipsis" data-garden-version="8.74.0" title="-" class="StyledEllipsis-sc-1u4uqmy-0 gxcmGf">-</div></span></div>
            <input data-garden-id="dropdowns.input" data-garden-version="8.54.3"
            aria-invalid="false" data-garden-container-id="containers.field.input" data-garden-container-version="3.0.15" id="downshift-5-input" aria-labelledby="downshift-5-label" aria-autocomplete="list" autocomplete="off" role="combobox" class="StyledInput-sc-hzhvmp-0 etSNgg StyledTextInput-sc-k12n8x-0 jEqqcP"
            value="">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true" data-garden-id="forms.media_figure" data-garden-version="8.74.3" class="StyledTextMediaFigure-sc-1qepknj-0 lnDzQq">
                <path fill="currentColor" d="M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"></path>
            </svg>
        </div>
    </div>
</div>

REACT DEV TOOLS HIERARCHY

The actual input element itself is the one indicated by the arrow:

CODE

I've tried many, many things but this is the first thing I tried:

function insertText(parent, text, selectorDescription) {
    if (!parent) {
        console.error(`Parent not found for ${selectorDescription}`);
        return;
    }

    let element = parent.querySelector('input');

    if (!element) {
        console.error(`Input field not found for ${selectorDescription}`);
        return;
    }

    element.click(); // tried with and without
    element.focus(); // tried with and without
    
    element.value = text;

    element.dispatchEvent(new Event('input', { bubbles: true, cancelable: true  }));
    element.dispatchEvent(new Event('change', { bubbles: true, cancelable: true  }));
}

What am I doing wrong? What is the correct approach in this context?