Vertically center radio button - React and Bootstrap

I have a container hosting a radio button on the left and other buttons on the right. For some reason, I am unable to align the radio buttons inline with the buttons on the right. Please advice me on a way to fix this.

This is what I have so far:

Code:

import React, { Component } from "react";
import { Box, Flex } from "@rebass/grid";
import cx from "classnames";
import styled from "styled-components/macro";
import {
  Button,
  ButtonGroup,
  Classes,
  Colors,
  Divider,
  Icon,
  Radio,
  RadioGroup
} from "@blueprintjs/core";
import { IconNames } from "@blueprintjs/icons";
import "normalize.css/normalize.css";
import "@blueprintjs/core/lib/css/blueprint.css";
import "@blueprintjs/icons/lib/css/blueprint-icons.css";
import "@blueprintjs/select/lib/css/blueprint-select.css";
import "bootstrap/dist/css/bootstrap.css";

const ScenarioIcon = styled(Button)`
  transition: all 0.2s ease;
}
`;

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
  }

  render() {
    return (
      <Flex>
        <Box width={"100%"}>
          <div
            style={{
              padding: "20px",
              backgroundColor: "red"
            }}
            className={cx("bp3-card bp3-interactive")}
          >
            <Flex alignItems="center" style={{ backgroundColor: "green" }}>
              <RadioGroup onChange={() => {}} selectedValue={1}>
                <Radio
                  style={{ backgroundColor: "yellow" }}
                  className={cx(Classes.TEXT_LARGE)}
                  label={"Sample"}
                  value={1}
                />
              </RadioGroup>
              <Box flex="auto" />
              <ButtonGroup>
                <ScenarioIcon
                  className="utility-button"
                  icon={<Icon icon={IconNames.EDIT} color={Colors.WHITE} />}
                  minimal={true}
                  title="Edit"
                />
                <ScenarioIcon
                  className="utility-button"
                  icon={
                    <Icon icon={IconNames.DUPLICATE} color={Colors.WHITE} />
                  }
                  minimal={true}
                  title="Copy"
                />
                <ScenarioIcon
                  className="utility-button"
                  icon={
                    <Icon
                      icon={IconNames.DOCUMENT_SHARE}
                      color={Colors.WHITE}
                    />
                  }
                  minimal={true}
                  title={"Archive"}
                />
                <ScenarioIcon
                  className="utility-button"
                  icon={
                    <Icon
                      icon={IconNames.TRASH}
                      color={Colors.RED1}
                      color={Colors.WHITE}
                    />
                  }
                  minimal={true}
                  title="Delete"
                />
                <Divider />
              </ButtonGroup>
              <Icon
                icon={IconNames.CHEVRON_RIGHT}
                color={Colors.WHITE}
                className="align-self-center"
                iconSize={20}
              />
            </Flex>
          </div>
        </Box>
      </Flex>
    );
  }
}

export default App;

CodeSandbox Link: Link

P.S: I am open to using bootstrap as well for alignment.

style={{ backgroundColor: "yellow", marginBottom: "0" }}