Sending data to the contract from the react frontend is not working

Question

I've made an twitter contract, where we can send and get tweets from the frontend React. While sending the data to the contract, The metamask popup is opening, But it shows warning like this.

I don't know why this is happening as I'm new to web3. My ABI data and other configurations are done well.

My code for sending the data is,

  const [loading, setLoading] = useState(false);
  const [tweetsData, setTweetsData] = useState([]);

  const createTweet = async () => {
    try {
      setLoading(true);
      const contract = new web3.eth.Contract(contractABI, contractAddress);

      await contract.methods.createTweet(content).send({
        from: accountId,
      });
      setLoading(false);
      setContent("");
      getAllTweets()
    } catch (error) {
      setLoading(false);
      console.error("ERROR", error);
    }
  };

The contract address and contractABI is correct as the fetching method from the contract is working fine. Only the sending method is throwing this error.

This is the contract code,

 
pragma solidity ^0.8.18;


contract Twitter {
    uint16 public MAX_LENGTH_LIMIT = 280;

    struct Tweet{
        uint256 id;
        address author;
        string content;
        uint256 timeStamp;
        uint256 likes;
    }

    mapping (address => Tweet[]) public tweets;
    
    address public owner;

    //Events creating:
    event TweetCreated(uint256 id, address author, string content, uint256 timeStamp);
    event TweetLiked(address liker, address tweetAuthor, uint256 tweetId, uint256 newLikeCount);
    event TweetUnLiked(address unLiker, address tweetAuthor, uint256 tweetId, uint256 newLikeCount);

    constructor() {
        owner = msg.sender;
    }


    modifier onlyOwner() {
        require(owner == msg.sender, "You are restricted since you;re not the owner.");
        _;
    }

    function changeTweetLength(uint16 tweetLength) public onlyOwner {
        MAX_LENGTH_LIMIT = tweetLength;
    }


    function createTweet(string memory _tweet) public {

        require(bytes(_tweet).length <= MAX_LENGTH_LIMIT, "Tweet is too long!");

        Tweet memory newTweet = Tweet({
            id: tweets[msg.sender].length ,
            author: msg.sender,
            content: _tweet,
            timeStamp: block.timestamp,
            likes: 0
        });

        tweets[msg.sender].push(newTweet);

        emit TweetCreated(newTweet.id, newTweet.author, newTweet.content, newTweet.timeStamp);
    }

function getTweet( uint _i) public view returns (Tweet memory) {
        return tweets[msg.sender][_i];
    }

    function getAllTweets(address _owner) public view returns (Tweet[] memory){
        return tweets[_owner];
    }
}```

Any help on this would be appreciated.