React-bootstrap ToggleButtonGroup использует старое значение при вызове

У меня есть форма, использующая ToggleButtonGroup из react-bootstrap. Мне нужно изменить некоторые текстовые значения в форме на основе значения, выбранного в переключателе. Проблема в том, что при вызове onChange на кнопку - я получил ранее выбранное значение переключателя, а не новое.

constructor(props) {
    super(props);  
    this.tradeInput = React.createRef();
}

handleChangeEvent() {
    console.info(this.tradeInput.current.props.value); // old value printed here
}

<ToggleButtonGroup type = "radio" name = "trade" defaultValue = "BUY" ref = {this.tradeInput} onChange = {e => this.handleChangeEvent(e)}>
    <ToggleButton value = "BUY">BUY</ToggleButton>
    <ToggleButton value = "SELL">SELL</ToggleButton>
</ToggleButtonGroup>

Может ли кто-нибудь предложить, как это исправить?

Обновлено: Очень странная вещь происходит, когда я пытаюсь прочитать значение в моей ссылке:

console.info(this.tradeInput.current) показывает правильное обновленное значение в current.props.value, но если я попытаюсь напечатать console.info(this.tradeInput.current.props.value) с точно таким же вводом, это даст мне другой результат (старое значение).

EDIT2: Полный обновленный код

class ResourceTradePanel extends React.Component {
    constructor(props) {
        super(props);

        this.state = { 
            validated: false,
            caps: 0,
            junk: 0,
            food: 0,
            trade: "BUY"
        };

        this.handleJunkChange.bind(this);
        this.handleFoodChange.bind(this);
        this.handleTradeChange.bind(this);
        this.updateCaps.bind(this);
        this.handleSubmit.bind(this);
    }

    handleSubmit(event) {
      ...
    }

    handleJunkChange(event) {
        this.setState({ 
            junk: event.target.value
        });
        this.updateCaps();
    }

    handleFoodChange(event) {
        this.setState({ 
            food: event.target.value
        });
        this.updateCaps();
    }

    handleTradeChange(event) {
        this.setState({ 
            trade: event.target
        });
        this.updateCaps();
    }

    updateCaps() {
        var capsInfo = 0;
        const junk = parseInt(this.state.junk);
        const food = parseInt(this.state.food);
        if (this.state.trade === "BUY") {
            capsInfo = (junk + food) * 2;
        } else if (this.state.trade === "SELL") {
            capsInfo = junk + food;
        };

        this.setState({ 
            caps: capsInfo
        });
    }

    render() {
        return <Card>
            <Card.Body>
                ...
                <Form 
                    id = "resourceForm"
                    noValidate
                    validated = {this.state.validated}
                    onSubmit = {e => this.handleSubmit(e)}
                >
                            <InputGroup className = "mb-3">
                                <FormControl
                                    name = "junk"
                                    type = "number"
                                    min = {0}
                                    max = {10}
                                    value = {this.state.junk}
                                    onChange = {e => this.handleJunkChange(e)}
                                />
                                <Form.Control.Feedback type = "invalid">
                                    <Translate id = "labels.resourceLimitExceeded" />
                                </Form.Control.Feedback>
                            </InputGroup>
                            <InputGroup className = "mb-3">
                                <FormControl
                                    name = "food"
                                    ref = {this.foodInput}
                                    type = "number"
                                    min = {0}
                                    max = {10}
                                    value = {this.state.food}
                                    onChange = {e => this.handleFoodChange(e)}
                                />
                                <Form.Control.Feedback type = "invalid">
                                    <Translate id = "labels.resourceLimitExceeded" />
                                </Form.Control.Feedback>
                            </InputGroup>
                            <InputGroup>
                                <FormControl
                                    type = "number"
                                    disabled
                                    value = {this.state.caps}
                                />
                            </InputGroup>
                            <ToggleButtonGroup type = "radio" name = "trade" defaultValue = {this.state.trade} onChange = {e => this.handleTradeChange(e)}>
                                <ToggleButton variant = "outline-dark" value = "BUY"><Translate id = "labels.buy" /></ToggleButton>
                                <ToggleButton variant = "outline-dark" value = "SELL"><Translate id = "labels.sell" /></ToggleButton>
                            </ToggleButtonGroup>
                </Form>
            </Card.Body>
        </Card>
    }
};