when using Select, it seems to render with a bunch of wrapper divs around it.

this makes it hard/impossible to do some layout adjustments from the top-level to the select component.

for example:

i want to render a row of controls (item1, item2 and select).
the row is flex but item1 and item2 are next to each other, while select is supposed to render on the right-end of the row.

<div1> -- parent wrapper, flexbox, justify-space-between
  <div2> -- inner wrapper, flexbox auto
    <item1>
    <item2>
  </div2>
  <Select> -- i want this to align to the right of the flex
</div1>

The Select aligns to the left by default. applying a margin-left: auto usually fixes this but in this case, it doesnt work because whatever style i apply, goes to the internal <select> but there are two/three wrapping divs above it which defeat the purpose.