how do i display the first value of an array as the default value in a select form?

Can you try defaultValue form-control-props

<Form.Control
  as="select"
  value={props.carts[0].id.toString()}
  defaultValue={props.carts[0].id.toString()}
  onChange={props.handleCart}
>
  {props.carts.map((cart,i) => (
    <option key={cart.id} value={cart.id}> 
       {cart.cart_name}
    </option>
  ))}
</Form.Control>