The following error appears when I’m trying to use react to deploy a smart contract using hardhat.

contract runner does not support sending transactions (operation=”sendTransaction”, code=UNSUPPORTED_OPERATION, version=6.13.1)

Here are the scripts used in react.js

1. BridgeData.js

import { ethers } from "ethers";

const contractAddress = "0x5fc8d32690cc91d4c39d9d3abcbd16989f875707"; // Replace with your contract address
const contractABI = [
  // ABI of the BridgeData contract
  {
    "inputs": [
      {"internalType": "uint256", "name": "bridgeId", "type": "uint256"},
      {"internalType": "string", "name": "name", "type": "string"},
      {"internalType": "string", "name": "location", "type": "string"},
      {"internalType": "uint256", "name": "length", "type": "uint256"},
      {"internalType": "uint256", "name": "height", "type": "uint256"},
      {"internalType": "uint256", "name": "yearBuilt", "type": "uint256"}
    ],
    "name": "addBridge",
    "outputs": [],
    "stateMutability": "nonpayable",
    "type": "function"
  },
  {
    "inputs": [{"internalType": "uint256", "name": "bridgeId", "type": "uint256"}],
    "name": "getBridge",
    "outputs": [
      {"internalType": "string", "name": "", "type": "string"},
      {"internalType": "string", "name": "", "type": "string"},
      {"internalType": "uint256", "name": "", "type": "uint256"},
      {"internalType": "uint256", "name": "", "type": "uint256"},
      {"internalType": "uint256", "name": "", "type": "uint256"}
    ],
    "stateMutability": "view",
    "type": "function"
  }
];

const getBridgeDataContract = () => {
  const provider = new ethers.BrowserProvider(window.ethereum);
  const signer = provider.getSigner();
  return new ethers.Contract(contractAddress, contractABI, signer);
};

export { getBridgeDataContract };

2. BridgeForm.js

import React, { useState } from "react";
import { getBridgeDataContract } from "./BridgeData";

const BridgeForm = () => {
  const [bridgeId, setBridgeId] = useState("");
  const [name, setName] = useState("");
  const [location, setLocation] = useState("");
  const [length, setLength] = useState("");
  const [height, setHeight] = useState("");
  const [yearBuilt, setYearBuilt] = useState("");

  const handleSubmit = async (event) => {
    event.preventDefault();
    const contract = getBridgeDataContract();
    await contract.addBridge(
      bridgeId,
      name,
      location,
      length,
      height,
      yearBuilt
    );
    console.log("Bridge data added successfully!");
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Bridge ID:</label>
        <input
          type="number"
          value={bridgeId}
          onChange={(e) => setBridgeId(e.target.value)}
          required
        />
      </div>
      <div>
        <label>Name:</label>
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          required
        />
      </div>
      <div>
        <label>Location:</label>
        <input
          type="text"
          value={location}
          onChange={(e) => setLocation(e.target.value)}
          required
        />
      </div>
      <div>
        <label>Length (meters):</label>
        <input
          type="number"
          value={length}
          onChange={(e) => setLength(e.target.value)}
          required
        />
      </div>
      <div>
        <label>Height (meters):</label>
        <input
          type="number"
          value={height}
          onChange={(e) => setHeight(e.target.value)}
          required
        />
      </div>
      <div>
        <label>Year Built:</label>
        <input
          type="number"
          value={yearBuilt}
          onChange={(e) => setYearBuilt(e.target.value)}
          required
        />
      </div>
      <button type="submit">Add Bridge</button>
    </form>
  );
};

export default BridgeForm;

3. BridgeDisplay.js

// BridgeDisplay.js
import React, { useState } from "react";
import { getBridgeDataContract } from "./BridgeData";

const BridgeDisplay = () => {
  const [bridgeId, setBridgeId] = useState("");
  const [bridge, setBridge] = useState(null);

  const handleSubmit = async (event) => {
    event.preventDefault();
    const contract = getBridgeDataContract();
    const bridgeData = await contract.getBridge(bridgeId);
    setBridge({
      name: bridgeData[0],
      location: bridgeData[1],
      length: bridgeData[2],
      height: bridgeData[3],
      yearBuilt: bridgeData[4]
    });
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <div>
          <label>Bridge ID:</label>
          <input
            type="number"
            value={bridgeId}
            onChange={(e) => setBridgeId(e.target.value)}
            required
          />
        </div>
        <button type="submit">Get Bridge Data</button>
      </form>
      {bridge && (
        <div>
          <h2>Bridge Data</h2>
          <p>Name: {bridge.name}</p>
          <p>Location: {bridge.location}</p>
          <p>Length: {bridge.length} meters</p>
          <p>Height: {bridge.height} meters</p>
          <p>Year Built: {bridge.yearBuilt}</p>
        </div>
      )}
    </div>
  );
};

export default BridgeDisplay;

4. App.js

// App.js
import React from "react";
import BridgeForm from "./BridgeForm";
import BridgeDisplay from "./BridgeDisplay";

function App() {
  return (
    <div className="App">
      <h1>Bridge Data Management</h1>
      <BridgeForm />
      <BridgeDisplay />
    </div>
  );
}

export default App;

I tried the previous scripts and every time I get the same error.