JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
    <select id="e10_2" style="width:200px" ></select>

JavaScript

var data = [
                {
                    "description" : "Parent" ,
                    "children" : [
                        {
                            "description" :"Child 1",
                            "id" : "11",
                            "children" : [
                                {
                                    "description" : "Grandchild 1",
                                    "id" : "111"
                                },
                                {
                                    "description" : "Grandchild 2",
                                    "id" : "112"
                                }
                            ]
                        },
                        {
                            "description" :"Child 2",
                            "id" : "12",
                            "children" : [
                                {
                                    "description" : "Grandchild 1",
                                    "id" : "121"
                                },
                                {
                                    "description" : "Grandchild 2",
                                    "id" : "122"
                                }
                            ]
                        }
                    ],
                    "id" : "1"
                }
            ];

            function descFormatResult(item) {

            }

            function descFormatSelection(item) {
                return item.description;
            }


            $("#e10_2").select2({
                matcher: function (term, text) {
                    return text.toUpperCase().indexOf(term.toUpperCase()) === 0;
                },
                placeholder: "Location",
                minimumInputLength: 0,
                data: function () {
                    return {
                        results: data,
                        text : "description"
                    }
           ...