I’m using react-select to create a multiple choices select in my form. The problem is that its content is being covered by the other inputs’s labels (i am using bootstrap form-floating) and just by adding a high z-index in the options class.

That’s the select and inputs elements:

<div className='row mb-2'>
                            <div className="col-12 mb-2">
                                <Select 
                                    isMulti
                                    value={selectedCategorias}
                                    onChange={setSelectedCategorias}
                                    options={categoriasOptions}
                                    isOptionDisabled={() => selectedCategorias?.length >= 3}
                                    placeholder="Categorias"
                                    className=""
                                    onClick={(e) => {handleCategoriaChange()}}
                                />
                            </div>
                        </div>
                        <div className='row mb-2'>
                            <div className='col-6 mb-2'>
                                <div className='form-floating mb-2 '>
                                    <NumericFormat className='form-control'
                                            value={pro_preco1.toLocaleString('pt-BR', {minimumFractionDigits: 2})} 
                                            allowLeadingZeros
                                            decimalSeparator=','
                                            thousandSeparator='.'
                                            decimalScale={2}
                                            placeholder='Preco'
                                        //     prefix='R$ '
                                            onValueChange={(values, sourceInfo) => {
                                                setPro_preco1(values.value);
                                            }} />
                                    {/* <input type="text" onChange={(e) => setPro_preco1(e.target.value)} value={new Intl.NumberFormat('pt-BR', {style: 'currency', currency: 'BRL'}).format(pro_preco1)} 
                                        className='form-control' id='preco1' placeholder='Preco1' /> */}
                                    <label htmlFor="floatingInput"><i className="fa-solid fa-asterisk fa-2xs" style={{color: "#e41607"}} id="icon-asterisco-obrigatorio"></i> Preço de venda</label>
                                </div>
                            </div>            

                            <div className='col-6 mb-2'>
                                <div className='form-floating '>
                                    <NumericFormat className='form-control'
                                            value={pro_preco_promocao.toLocaleString('pt-BR', {minimumFractionDigits: 2})} 
                                            allowLeadingZeros
                                            decimalSeparator=','
                                            thousandSeparator='.'
                                            decimalScale={2}
                                            placeholder='Preço Promocao'
                                            //  prefix='R$ '
                                            onValueChange={(values, sourceInfo) => {
                                                setPro_preco_promocao(values.value);
                                            }} />
                                    {/* <input type="text" onChange={(e) => setPro_preco_promocao(e.target.value)} value={new Intl.NumberFormat('pt-BR', {style: 'currency', currency: 'BRL'}).format(pro_preco_promocao)} 
                                        className='form-control' id='precopromocao' placeholder='Preço Promocao' /> */}
                                    <label htmlFor="floatingInput"> Preço de promoção</label>
                                </div>
                            </div>            
                        </div>

How it’s going.