react-bootstrap align-middle not working for Columns

Question

According to bootstrap documentation I should be able to vertically align something inside of a column by using the align-middle class. I have written this code