Masonery not correctly layout because force to have invisible columns

[c0ncentus]

hi, I want order in alphabet order so

return <div className="lexcoAlphabet_Cpnt">
            <Masonry options={{
                fitWidth: true,
                gutter: 1,
                itemSelector: ".smhold",
                horizontalOrder: true,
                resize: true,
            }}>
                {ALPHABET.map((a, i) => {
                    const { height, width } = this.valueToPrct(letters.filter((x) => { return x.toUpperCase() === a }).length, norm)
                    return <div
                        key={a}
                        onClick={() => { if (onClickLetter !== undefined) { onClickLetter(a) } }}
                        className="smhold"
                        style={{ backgroundColor: this.props.color[i], width, height }}>
                        <div className="shine">
                            <span className="icons">{a.toLowerCase()}</span>
                        </div>
                    </div>
                })}
            </Masonry>
        </div>

but excpected this (no for colors but orders (mainly due to not flexible col)