.flex-grow-1 on react-bootstrap <Row> not filling vertical space

I'm struggling to get .flex-grow-1 in Bootstrap 4.6.0 (with react-bootstrap 1.5.2) to get a component on my layout to expand to fill the remaining vertical space available.

"bootstrap": "^4.6",
"react-bootstrap": "1.5.2",

The following code produces a wireframe of the screen layout that I am trying to build.

import React, { Component } from "react";
import { Col, Row } from "react-bootstrap";
import './SingleSignIn.scss'


class SignUpLayout extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    const { country } = this.state;
    return (
      <Row>
        <Col id="left-column" className="grid bg-warning" style={{height: "100vw"}}>
          <Row className="grid flex-nowrap">
            <Col className="grid">
              {/* left margin */}
            </Col>
            <Col className="grid" xs={6} sm={6} md={6} lg={6} xl={6}>
              <Row className="grid" style={{height: "80px"}}>
                Welcome To:
              </Row>
              <Row className="grid" style={{height: "125px"}}>
                logo goes here
              </Row>
            </Col>
            <Col className="grid">
              {/* right margin */}
            </Col>
          </Row>
          <Row id="body" className="grid bg-danger flex-grow-1 flex-nowrap">
            <Col className="grid">
              {/* body left margin */}
            </Col>
            <Col className="grid" xs={10} sm={10} md={8} lg={8} xl={8}>
              <Row className="grid" style={{height: "10%"}}>
                e-mail input
              </Row>
              <Row className="grid" style={{height: "10%"}}>
                company name input
              </Row>
              <Row className="grid" style={{height: "10%"}}>
                country input
              </Row>
              <Row className="grid" style={{height: "10%"}}>
                phone number
              </Row>
              <Row className="grid" style={{height: "10%"}}>
                get started button
              </Row>
            </Col>
            <Col className="grid">
              {/* body right margin */}
            </Col>
          </Row>
        </Col>
        <Col id="right-column" className="grid" style={{height: "100vw"}}>
          Right Column
        </Col>
      </Row>
    )
  }
}

export default SignUpLayout;

My intention is to get the component identified as #body to grow vertically to fill the remaining vertical space available on the viewport. I'm using the .flex-grow-1 class to try to accomplish this based on other similar posts that I came across in my search but it's not having the desired effect.

The resulting wireframe layout that I get from the above code is the following:

Thanks in advance for the pointers.