I'm creatin ga select in a f orm in which the values are recover from api.

Now my problem is the select didn't show all the values in right way, so I can find the values, but it doesn't appears in the list (as it is cutted)

as you can see it is not shown correctly.

 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>

How can I fix? thank you

Edit:

I have tried to use:

const customStyles = { option: (provided, state) => ({ padding: 5, }), }

and I can see more values, but don't all values..