Simple Smart Contract Error: Transaction reverted: function selector was not recognized and there's no fallback function

Question

I'm just playing around with full-stack web3 development and created a simple smart contract and react front-end as follows.

// WaveProtocol.sol

pragma solidity ^0.8.4;

import "hardhat/console.sol";

contract WavePortal
{
    uint256 totalWaves;

    struct Wave {
        address waver;
        string message;
        uint256 timestamp;
    }
    Wave[] waves;

    function wave(string memory _message) public {
        totalWaves += 1;
        waves.push(Wave(msg.sender, _message, block.timestamp));
    }

    function getAllWaves() public view returns (Wave[] memory) {
        return waves;
    }

    function getTotalWaves() public view returns (uint256) {
        return totalWaves;
    }
}

// React Front-End

  const wave = async () => {
    try {
      const { ethereum } = window;

      if (ethereum) {
        const provider = new ethers.providers.Web3Provider(ethereum);
        const signer = provider.getSigner();
        const wavePortalContract = new ethers.Contract(contractAddress, contractABI, signer);

        let count = await wavePortalContract.getTotalWaves();
        console.log("Retrieved total wave count...", count.toNumber());

        const waveTxn = await wavePortalContract.wave("this is a message");
        console.log("Mining...", waveTxn.hash);

        await waveTxn.wait();
        console.log("Mined -- ", waveTxn.hash);
      } else {
        console.log("Ethereum object doesn't exist!");
      }
    } catch (error) {
      console.log(error);
    }
  }

but when I call the wave(), my hardhat node terminal puts an unrecognized selector error:

(https://i.stack.imgur.com/SDRpN.png)

so what's wrong? I need your help.