Estoy creando una selección en una forma en la que los valores se recuperan de la API.

Ahora mi problema es que la selección no mostró todos los valores de la manera correcta, por lo que puedo encontrar los valores, pero no aparece en la lista (ya que está cortado)

como se puede ver no se muestra correctamente.

 const listaRealmTrovata = async () => { await axios.get(`${apiUrlRealm}?deletedDate.specified=false`) .then( (resp) => { // recupero in questo modo la lista dei realm attivi resp.data.map(res => { console.log("res ", res) setListaRealm(listaRealm => [...listaRealm, { value: res.id, label: res.realmId }]) }) } ) } useEffect(() => { listaRealmTrovata() }, []) return ( <div> <div className="container"> <Row className="justify-content-center"> <Col md="8"> <h2> Create </h2> </Col> </Row> <AvForm model={{}} onSubmit={saveEntity}> <Row> <Col md="12"> <div style={{ marginTop: 50, marginBottom: 50 }}> <Label for="realm"> Realm </Label> <Select options={listaRealm.length > 0 ? listaRealm : null} isMulti className="select-custom-class" /> </div> </Col> </Row> <div className="container my-3"> <div className="col-md-12 text-center" style={{ marginTop: 30 }} > <Button color="primary" id="save-entity" data-cy="entityCreateSaveButton" type="submit" style={{}}> Save </Button> </div> </div> </AvForm> </div> </div>

¿Cómo puedo arreglar? gracias

Editar:

He intentado usar:

const customStyles = { opción: (proporcionado, estado) => ({ relleno: 5, }), }

y puedo ver más valores, pero no todos los valores..