html – Is there any method to set a choose dropdown to show its information downwards as a substitute of upwards?

I am mapping an inventory with some information in an enter choose dropdown, however the “choose” is displaying information from the highest of the display till the enter choose, as a substitute of beginning to show information from the choose enter downwards. I’ll connect a screenshot of the way it seems to be like and my code for that enter choose.

Picture of how the choose is displaying up the info

<Type.Group as={Col} controlId="formGridZip">
            <Type.Label>{typeSelection}</Type.Label>  {/* worth that units the title of the label dinamically as soon as an choice is chosen within the earlier dropDown */}
            <Type.Choose defaultValue="Select...">
              {
                consultSelection > -1 &&
                (
                  cdrTypeRequest[consultSelection].api.map((merchandise, i)=>(
                    <choice key={"title" + i} worth={i}>{merchandise.title}</choice>
                  ))
                )
              }
            </Type.Choose>
          </Type.Group>

I’ve no points with the info itself however how it’s being displayed on the dropdown, because it supposes to be from the enter choose discipline downwards, as I usually see it really works. I am undecided if it displaying it in that approach due to the quantity of information the choose is attempting to show? I’ve already check in different browsers and nonetheless displaying it in the identical approach?

I might recognize your assist and any clarification on how this components work! Thanks!