Displaying selected options in custom multiselect dropdwown as tags – React

I’ve custom multiselect dropdown which is implemented as given below

const RequestExpertSupport = function Basic({ data, onSelectedItemsChanged, selectedItemsIndices }) {

        const props = {

            "data" : [

                "My account and profile",

                "Understanding my footprint",

                "Target setting",

                "Specific actions",

                "Creating a plan",

                "Finance, funding and grants ",

                "Using the Carbon Planner platform",

                "Other",

            ],

            "selectedItemsIndices": [],

        }

        //

        const handleSelectedItemsChanged = useCallback(

            selectedItemsIndices => {

                onSelectedItemsChanged(selectedItemsIndices)

            },

            [onSelectedItemsChanged]

        );

       function onSelectedItemsChanged(selectedItemsIndices) {

            // let arrTopic = [];

            // const selected = document.querySelectorAll('#multiSelectDrop:checked');

            // const values = Array.from(selected).map(el => el.value);

         

            // console.log(values);

            console.log(selectedItemsIndices);

        }

        function renderItem (datum, index) {

                                return (

                                                <span>

                                                                {datum}

                                                </span>

                                );

                }

   

        return(

            <RequestExpertSupportDiv>

                <div className="container">

                    <div className="formContainer">

                        <form>

                            <label className="helpLabel">What would you like help with?</label>

                            <DropdownListTrigger

                                dropdownList={

                                    <MultiSelectDropdownList

                                        id="multiSelectDrop"

                                        data={props.data}

                                        onSelectedItemsChanged={handleSelectedItemsChanged}

                                        renderItem={renderItem}

                                        selectedItemsIndices={selectedItemsIndices}

                                    />

                                }

                                position="right"

                                className="ddlFilter"

                                >

                                <button className="zb-button zb-button-secondary zb-button-with-icon-after">

                                    <Span>Choose topic(s)</Span>

                                    <Icon

                                        name="chev-down-xsmall"

                                        style={{

                                            verticalAlign: "text-bottom",

                                        }}

                                        title={null}

                                    />

                                </button>

                            </DropdownListTrigger>

                            <div className="selectedTopics">

                                Selected topics are:

                            </div>

                            <label className="tellUsLabel">What would you like help with?</label>

                            <textarea name="helpReview" rows="4" cols="43" className="textArea"

                                style={{ width: "410px", height: "290px", marginTop: "2%" }}

                                placeholder="Type your message here ..."></textarea>

                            <button className="sendBtn" name="sendBtn">Send</button>

                       </form>

                    </div>

                </div>

            </RequestExpertSupportDiv>

        );

    };

    export default RequestExpertSupport;  

This code fetches the indices of selected options in Multiselect dropdown.

function onSelectedItemsChanged(selectedItemsIndices) {

        // let arrTopic = [];

        // const selected = document.querySelectorAll('#multiSelectDrop:checked');

        // const values = Array.from(selected).map(el => el.value);

     

        // console.log(values);

        console.log(selectedItemsIndices);

    }    

Console is given below:

Now I want to display those selected options as tags like this:

This is the code for tags:

<Div

                    flex="flex"

                    display="inline-flex"

                    height="36px"

                    borderWidth="1px solid #009FAC"

                    borderRadius="3px"

                    backgroundColor="#def8fa"

                    justifyContent="space-around"

                    alignItems="center"

                    marginRight="10px"

                    marginBottom="10px"

                    key={index}

                    style={{ minWidth: "92px", maxWidth: "175px" }}

                  >

                    <Span

                      padding="0px"

                      fontSize="14px"

                      lineHeight="20px"

                      fontWeight="400"

                      marginLeft="5px"

                      marginRight="5px"

                      style={{ maxWidth: "142px" }}

                    >

                      // need to put selected options here

                    </Span>

                    <Icon

                      name="close-inverted-small"

                      onClick={(event) => removeSelectedTopic(event, topicId)}

                    />

                    &nbsp;

                  </Div>  

I’m not getting how to link function SelectedItemsChanged(selectedItemsIndices) with that tags frontend code to dosplay selected options as tags…