JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqxknockout.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div data-bind="dropDownTree:{source: [] }"></div>

JavaScript

ko.bindingHandlers.dropDownTree = {
    init: function (element, valueAccessor, allBindings, viewModel) {
        var $el = $(element),
            $btn = $('<div />'),
            options = ko.unwrap(valueAccessor()),
            src = {
                datatype: 'json',
                datafields: [{
                    name: 'id'
                }, {
                    name: 'parentID'
                }, {
                    name: 'label'
                }, {
                    name: 'value'
                }, {
                    name: 'html'
                }, {
                    name: 'disabled'
                }, {
                    name: 'checked'
                }, {
                    name: 'expanded'
                }, {
                    name: 'selected'
                }, {
                    name: 'items'
                }, {
                    name: 'icon'
                }, {
                    name: 'iconsize'
                }],
                id: 'id',
                localdata: options.source
            },
            dp = new $.jqx.dataAdapter(src, {
                loadComplete: function (records) {
                    $el.jqxTree({
                        source: dp.records
                    });
                }
            });
        dp.dataBind();

        $btn.jqxDropDownButton();
        $el.jqxTree();

        $btn.on('open', function () {
            if ($el.jqxDropDownButton('isOpened')) {}
        });

        

        $el.on('select', function (event) {
            var args = event.args,
                item = $el.jqxTree('getItem', args.element),
                ddContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + item.label + '</div>';           
        });

        $btn.jqxDropDownButton('setContent', '<div style="position: relative; margin-left: 3px; margin-top: 5px;">Select Category</div>');

        $el.wrap($btn.html());
       ...