Как выделить выбранный элемент в пользовательском ComboBox QML?

Это код:

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.0

ComboBox
{
    id: control
    property string text_color
    property string backcolor
    property int font_size
    property string font_family: decoration.font_family

    model: ["ABCD", "XYZQ"]

    delegate: ItemDelegate {
            width: control.width
            height:control.height
            Rectangle
            {
                height: control.height; width: control.width; border.width: 1; color: decoration.colour_666b78
                radius: 4

                border.color: decoration.colour_24232f
                Text {
                        opacity: 0.70
                        text: modelData
                        color: control.text_color
                        font.family: control.font_family
                        font.pointSize: control.font_size
                        anchors.centerIn: parent
                    }
            }

            highlighted: control.highlightedIndex === index


        }

    indicator: Canvas {
        id: canvas
        x: control.width - width - control.rightPadding
        y: control.topPadding + (control.availableHeight - height) / 2
        width: decoration.getWidth( 12)
        height: decoration.getHeight( 8)
        contextType: "2d"

        Connections {
            target: control
            function onPressedChanged() { canvas.requestPaint(); }
        }

        onPaint: {
            context.reset();
            context.moveTo(0, 0);
            context.lineTo(width, 0);
            context.lineTo(width / 2, height);
            context.closePath();
            context.fillStyle = control.pressed ? "white":"white"
            context.fill();
        }
    }

    contentItem: Text
    {
        leftPadding: decoration.getWidth( 10)
        rightPadding: control.indicator.width + control.spacing

        text: control.displayText
        font.family: control.font_family
        font.pointSize: control.font_size
        color: control.pressed ? "#bdbdbe" : "#bdbdbe"
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }

    background: Rectangle {
        width: control.width
        height: control.height
        color: decoration.colour_292a38
        border.color: decoration.colour_23232f
        border.width: decoration.button_border_width
        radius: decoration.box_radius


    }

    popup:
        Popup
        {
            y: control.height - 1
            width: control.width
            implicitHeight: contentItem.implicitHeight
            padding: decoration.getWidth( 1)

            contentItem: ListView {
                clip: true
                height: contentHeight
                model: control.popup.visible ? control.delegateModel : null
                currentIndex: control.highlightedIndex

                ScrollIndicator.vertical: ScrollIndicator { }
            }

            background: Rectangle {
                color: control.backcolor
                border.color: decoration.colour_69697c
                radius: decoration.box_radius
            }
        }
}

Это приводит к:

Как вы можете видеть, за первым элементом изображено что-то белого цвета. Кажется, это изюминка.

Я хочу, чтобы цвет прямоугольника выбранного элемента менялся при выделении. Как этого добиться?