I want to render my items according to the sorting but I don't know why it is not rendering items accordingly. When I console the values so it shows correctly, and when I checked the data-order so it shows the output like 1, 3, 2

constructor(props) {
    super(props)
    this.state = {
        properties: [
            {
                order: 3,
                title: "Title 3",
                type: "checkbox"
            },
            {
                order: 1,
                title: "Title 1",
                type: "string"
            },
            {
                order: 5,
                title: "Title 5",
                type: "number"
            },
            {
                order: 2,
                title: "Title 2",
                type: 'checkbox'
            }
        ]
    }
}

render() {
    return (
        [...this.state.properties].sort((a, b) =>  (a.order > b.order) ? 1 : -1).map((item, key) => {
            switch(item.type) {
                case "string":
                    return <StringComponent data-order={item.order} {...item} />;
                case "number":
                    return <NumberComponent data-order={item.order} {...item} />;
                case "checkbox":
                    return <CheckboxComponent data-order={item.order} {...item} />;
            }
        })
    )
}

output:

<div data-order="1"></div>
<div data-order="5"></div>
<div data-order="3"></div>
<div data-order="2"></div>

when I console the value so the output is:

[
    {
        order: 1,
        title: "Title 1",
        type: "string"
    },
    {
        order: 2,
        title: "Title 2",
        type: 'checkbox'
    }
    {
        order: 3,
        title: "Title 3",
        type: "checkbox"
    },
    {
        order: 5,
        title: "Title 5",
        type: "number"
    },
]