Tengo un formulario en ReactJs, el cual le puse un React Select. Ambos, funcionan correctamente como se muestra a continuación:
<div className="login templete d-flex justify-content-center align-items-center 100-w 100-vh">
<div className="50-w p-5 rounded bg-white">
<h3>Antecedentes Hereditarios y Familiares-Entrada de Datos</h3>
<div className="input-group">
<br></br><br></br>
<div className="form-group" >
<label htmlFor="">Padecimiento:</label>
<input type="text" onChange={e=>padecimientochange(e.target.value)} value={txtpadecimiento || ''} name="txtpadecimiento" id="txtpadecimiento" className="form-control" aria-describedby="helpId" size={15} placeholder="Teclea el padecimiento" >
</input>
</div>
<div className="form-group">
<label htmlFor="">Familiar que lo padece</label>
<Select
className='search-line'
placeholder= 'Seleccione Familiar que tiene el padecimiento'
options={familiares.map(sup3=>({label: sup3.Nom_tipo_familiar, value: sup3.Id_Tipo_familiar }))}
Change={handleSelectChangefamiliares}
/>
</div>
<br></br><br></br><br></br><br></br>
<div className="input-group">
<span className="input-group-btn">
<button className="btn btn-success" onClick={agregarAntecedenteHereyFam} aria-label="">Agregar el padecimiento</button>
</span>
</div>
</div>
</form>
</div>
</div>
El problema, es que cuando carga información la muestra "atrás del formulario" como se muestra en la imagen:
No entiendo, que es lo que pasa. ¿Me falta agregar alguna línea de código al React Select?, ¿Cómo se resuelve esto?. Saludos y Gracias por su ayuda.