Why does asynchronous function cause PropTypes to be null

I have a simple react app with Firebase with this structure

 +-- src
 |  |  
 |  +-- component
                      + index.js
                      + MySampleApp.js

in the index.js I have a create a React component SampleAppPage and I try to pass the prop from the SampleAppPage to the MySampleApp, like this,

SampleAppPage extends React.Componet {

  render() {
    return (
    <MySampleApp varA={item.itemVarA} varB={item.itemData.itemVarB} varC={item.itemData.itemVarC || 0}/>

import React from 'react';
import PropTypes from 'prop-types';

class MySampleApp extends React.Component {

    static propTypes = {
        varA: PropTypes.number.isRequired,
        varB: PropTypes.string.isRequired,
        varC: PropTypes.string.isRequired,

    constructor(props) {

        this.state = INITIAL_STATE;
        this.varA = db.getByReference(A_NODE);
        this.varB = db.getByReference(B_NODE);
        this.varC = db.getByReference(C_NODE);

In the debug mode, props were passed fine but in the render function for MySampleApp,

<Button icon='like' floated='right' onClick={this.foo} loading={loading}/>

I made a async call for this.foo function variable like this

foo = async () => {
      this.setState({ loading: true });

      try {
         await db.pushToReference(); //asynchronous call to push data to Firebase Realtime database reference node

             loading: false



Why varA and varB PropTypes were passed successfully in the MySampleApp constructor but when I called the async function, why varA prints the value but var B print null

Is it because the async operation in the function variable?

I’m quite new in the JavaScript space so please spare me some insights on the issue?

Source: Ask Javascript Questions