I'm trying to code an auction platform. When contract sends a revert function, I want to show it on screen. I'm using web3.js version 1.5.

This is the related solidity code;

function bid() public payable {
    require(
        now <= auctionEndTime,
        "Auction already ended."
    );

    require(
        //I want to print this error on screen.
        msg.value > highestBid,
        "There already is a higher bid."
    );

    if (highestBid != 0) {
        pendingReturns[highestBidder] += highestBid;
    }
    highestBidder = msg.sender;
    highestBid = msg.value;
    emit HighestBidIncreased(msg.sender, msg.value);
}

This is the javascript code to bid & get error;

async bid(amount) {
      if(this.state.auction!=='undefined'){
        try{
          await this.state.auction.methods.bid().send({value: this.state.web3.utils.toWei(amount).toString(), from: this.state.account})
        } catch (e) {
        console.log(e)
        }
      }
    }

This is what I get on the console if I bid lower than highest bid;

{code: -32603, message: Error: [ethjs-query] while formatting outputs from…/task_queues.js:93:5)","name":"RuntimeError"}}}}', stack: Error: Error: [ethjs-query] while formatting outpu…/task_queues.js:93:5)","name":"RuntimeError"}}}}'}

What I want is to print "There already is a higher bid." on the console, but I couldn't make it work. I read web3 docs & metamask docs but no luck in there. Thank you for your answers.