Getting "undefined" in my frontend react, when requesting chainlink random number

I have already deployed a smart contract with chainlink VRFConsumerBase named game contract as shown below to get a random number. When I am calling from front-end to get random number, it is showing "undefined" as show in the picture below.

Error Message

async BelowSeven(amount){
const gameContract=this.state.gameContract
let firstDiceNumber =(await gameContract.getRandomNumber())
window.alert("Rolling Dies")
firstDiceNumber=await gameContract.randomResult
console.log(firstDiceNumber)

window.alert("Completed")
//let secondDiceNumber =(await gameContract.getRandomNumber())
//secondDiceNumber=await gameContract.randomResult
//const result= firstDiceNumber+secondDiceNumber
//console.log(secondDiceNumber)
}

Random Number Generating Contract (game Contract):

pragma solidity >=0.4.0 <0.9.0;

import "@chainlink/contracts/src/v0.8/VRFConsumerBase.sol";

contract game is VRFConsumerBase{

    uint public randomResult;
    bytes32 internal keyHash;
    uint internal fee;

    constructor() VRFConsumerBase(0xb3dCcb4Cf7a26f6cf6B120Cf5A73875B7BBc655B,
        0x01BE23585060835E02B77ef475b0Cc51aA1e0709) public
        {
        keyHash=0x2ed0feb3e7fd2022120aa84fab1945545a9f2ffc9076fd6156fa96eaff4c1311;
        fee=0.1 *10**18;
    }

    function getRandomNumber() public returns(bytes32 requestId){
        return requestRandomness(keyHash,fee);
    }

    function fulfillRandomness(bytes32 requestId,uint randomness) internal override{
        randomResult=randomness%7;
    }

    function contractBalance() public view returns(uint){

          
        return address(this).balance;
    }
    function contractFund() external payable{

    }
}