Can't access custom MenuItem html #842

I'm trying to implement a custom input file with button menu item. A custom way to update the menu options. The existing allowNew is a nice feature, but I need buttons to make it clear the item is being saved, not just added to the selection. Plus I have a use case where a select is needed as well. I won't justify why this can't be done outside of the menu list. It will just work better if it is.

I add an option with the input and button, and it renders ok. The MenuItem is set to disabled because if I didn't it would do all the row highlighting and clicking it would add it to the options (the input field and button would become a token/tag).

However setting MenuItem to disabled makes the inner html input and button unclickable. When I right click inspect the button it's the parent rbt-menu dropdown-menu div that's onto, blocking access.

I noticed when I click on a disabled menu item, the upper rbt-input div updates its class with "focus". There's an event on the div wrapping the renderMenu items which focus' the typeahead input at the top. This kind of defeats the purpose of disabling a menu item because if it's disabled, the component shouldn't focus on the typeahead, you can't click it.

This being said, setting disabled on an option item doesn't do anything I can observe. I assumed it would make a MenuItem unclickable and not highlight it. It does that, but the parent renderMenu wrapper doesn't.

See my general sample below to give you an idea, but all you need to do is create a basic typeahead with a disabled menu item that contains an input. You won't be able to access the input when opening the menu.

Version: 6.2.3

Steps to reproduce

   options.push({
            label: (
                <div>
                    <input
                    type="text"
                    placeholder="Add new option..."
                    onChange={handleInputChange}
                    />
                    <button onClick={handleAddOption}>Add</button>
                </div>
            ),
            value: false,
            disabled: true, // Disable selection of this item
          })
    }
    if (props.options !== undefined && props.options.length > 0) {
        options = [
            ...options,
            ...props.options
        ]
    }

...

        <Typeahead
            ref={ref}
            id={'mutableTypeahead'}
            labelKey="label"
            value={selectValue}
            multiple={true}
            clearButton
            selected={selectedValueOptions}
            options={options}
            renderMenu={(results, menuProps, state) => {
                return (
                    <Menu {...menuProps}>{options.map((o, idx) => {
                        return (
                            <MenuItem key={idx} option={o} position={idx} disabled={o.disabled}>
                               {o.label}
                            </MenuItem>
                        )
                    })}</Menu>
                )
            }}
        />

Expected Behavior

I want to access disabled MenuItem html elements.

Actual Behavior

I can't access disabled MenuItem html elements.