Top margin in select pushes option list too low - web and ios

[deemyboy]

large gap on IOS ^

and on the web (responsive mode chrome dev tools)

I tried to use marginTop: 0

<FormBuilder control={control} setFocus={setFocus} formConfigArray={[ { name: 'title', type: 'select', textInputProps: { label: 'Subject', left: <TextInput.Icon icon={'chevron-down'} />, style: { marginTop: 0 }, }, options: options, }, { name: 'description', type: 'text', textInputProps: { numberOfLines: 5, multiline: true, label: "What's going on", style: { height: 90, flexWrap: 'wrap' }, left: <TextInput.Icon icon={'pen'} />, }, rules: { required: { value: true, message: 'The details of your issue are required', }, }, }, ]} />

but that put the margin on top of the (unopened ) select box

I was trying to drill down to the

<div class="css-view-175oi2r r-position-u8s1d r-marginTop-p3zhlq r-minWidth-bgk546 r-width-1bkmhm5 r-pointerEvents-12vffkv" data-testid="menu-view" style="top: 317.5px; left: 50.75px;">

data-testid=menu-view element

which has a r-marginTop-p3zhlq class which is .r-marginTop-p3zhlq { margin-top: 56px; }

there's no id to hook into but I suppose worse comes to worse I could use this css to change it

div[data-testid^='menu-view'] { margin-top: 0; }

which works but... how to pass that into the component?