Hello beautiful people, Please i am looking for an assistance using cardano-serialization-lib, the browser version...i created an always succeed script and lock some ada , when i try to unlock its saying ppviewhashes do not match

buildRedeemAdaFromPlutusScript = async () => {

    const txBuilder = await this.initTransactionBuilder();
    const ScriptAddress = Address.from_bech32(this.state.addressScriptBech32);
    const shelleyChangeAddress = Address.from_bech32(this.state.changeAddress)

    txBuilder.add_input(
        ScriptAddress,
        TransactionInput.new(
            TransactionHash.from_bytes(Buffer.from(this.state.transactionIdLocked, "hex")),
            this.state.transactionIndxLocked.toString()),
        Value.new(BigNum.from_str(this.state.lovelaceLocked.toString()))) // how much lovelace is at that UTXO

    txBuilder.set_fee(BigNum.from_str(Number(this.state.manualFee).toString()))

    const scripts = PlutusScripts.new();
    scripts.add(PlutusScript.from_bytes(Buffer.from(this.state.plutusScriptCborHex, "hex"))); //from cbor of plutus script

    // Add outputs
    const outputVal = this.state.lovelaceLocked.toString() - Number(this.state.manualFee)
    const outputValStr = outputVal.toString();
    txBuilder.add_output(TransactionOutput.new(shelleyChangeAddress, Value.new(BigNum.from_str(outputValStr))))


    // once the transaction is ready, we build it to get the tx body without witnesses
    const txBody = txBuilder.build();

    const collateral = this.state.CollatUtxos;
    const inputs = TransactionInputs.new();
    collateral.forEach((utxo) => {
        inputs.add(utxo.input());
    });

    let datums = PlutusList.new();
    // datums.add(PlutusData.from_bytes(Buffer.from(this.state.datumStr, "utf8")))
    datums.add("jnkllkk")

    const redeemers = Redeemers.new();

    const data = PlutusData.new_constr_plutus_data(
        ConstrPlutusData.new(
            BigNum.from_str("0"),
            PlutusList.new()
        )
    );

    const redeemer = Redeemer.new(
        RedeemerTag.new_spend(),
        BigNum.from_str("0"),
        data,
        ExUnits.new(
            BigNum.from_str("7000000"),
            BigNum.from_str("3000000000")
        )
    );

    console.log("this is reedemer ", redeemer)

    redeemers.add(redeemer)

    // Tx witness
    const transactionWitnessSet = TransactionWitnessSet.new();

    transactionWitnessSet.set_plutus_scripts(scripts)
    //transactionWitnessSet.set_plutus_data(datums)
    transactionWitnessSet.set_redeemers(redeemers)

    // Pre Vasil hard fork cost model
    // const cost_model_vals = [
    //     197209, 0, 1, 1, 396231, 621, 0, 1, 150000, 1000,
    //     0, 1, 150000, 32, 2477736, 29175, 4, 29773, 100, 29773, 100, 29773, 100,
    //     29773, 100, 29773, 100, 29773, 100, 100, 100, 29773, 100, 150000, 32, 150000,
    //     32, 150000, 32, 150000, 1000, 0, 1, 150000, 32, 150000, 1000, 0, 8, 148000,
    //     425507, 118, 0, 1, 1, 150000, 1000, 0, 8, 150000, 112536, 247, 1, 150000,
    //     10000, 1, 136542, 1326, 1, 1000, 150000, 1000, 1, 150000, 32, 150000, 32,
    //     150000, 32, 1, 1, 150000, 1, 150000, 4, 103599, 248, 1, 103599, 248, 1,
    //     145276, 1366, 1, 179690, 497, 1, 150000, 32, 150000, 32, 150000, 32, 150000,
    //     32, 150000, 32, 150000, 32, 148000, 425507, 118, 0, 1, 1, 61516, 11218, 0,
    //     1, 150000, 32, 148000, 425507, 118, 0, 1, 1, 148000, 425507, 118, 0, 1, 1,
    //     2477736, 29175, 4, 0, 82363, 4, 150000, 5000, 0, 1, 150000, 32, 197209, 0,
    //     1, 1, 150000, 32, 150000, 32, 150000, 32, 150000, 32, 150000, 32, 150000, 32,
    //     150000, 32, 3345831, 1, 1
    // ];

    /*
    Post Vasil hard fork cost model
    If you need to make this code work on the Mainnet, before Vasil hard-fork
    Then you need to comment this section below and uncomment the cost model above
    Otherwise it will give errors when redeeming from Scripts
    Sending assets and ada to Script addresses is unaffected by this cost model
     */
    const cost_model_vals = [
        205665, 812, 1, 1, 1000, 571, 0, 1, 1000, 24177, 4, 1, 1000, 32, 117366,
        10475, 4, 23000, 100, 23000, 100, 23000, 100, 23000, 100, 23000, 100, 23000,
        100, 100, 100, 23000, 100, 19537, 32, 175354, 32, 46417, 4, 221973, 511, 0, 1,
        89141, 32, 497525, 14068, 4, 2, 196500, 453240, 220, 0, 1, 1, 1000, 28662, 4,
        2, 245000, 216773, 62, 1, 1060367, 12586, 1, 208512, 421, 1, 187000, 1000,
        52998, 1, 80436, 32, 43249, 32, 1000, 32, 80556, 1, 57667, 4, 1000, 10,
        197145, 156, 1, 197145, 156, 1, 204924, 473, 1, 208896, 511, 1, 52467, 32,
        64832, 32, 65493, 32, 22558, 32, 16563, 32, 76511, 32, 196500, 453240, 220, 0,
        1, 1, 69522, 11687, 0, 1, 60091, 32, 196500, 453240, 220, 0, 1, 1, 196500,
        453240, 220, 0, 1, 1, 806990, 30482, 4, 1927926, 82523, 4, 265318, 0, 4, 0,
        85931, 32, 205665, 812, 1, 1, 41182, 32, 212342, 32, 31220, 32, 32696, 32,
        43357, 32, 32247, 32, 38314, 32, 9462713, 1021, 10,
    ];

    const costModel = CostModel.new();
    cost_model_vals.forEach((x, i) => costModel.set(i, Int.new_i32(x)));


    const costModels = Costmdls.new();
    costModels.insert(Language.new_plutus_v1(), costModel);

    const scriptDataHash = hash_script_data(redeemers, costModels, datums);
    console.log(scriptDataHash.to_bytes().toString('hex'));
    const a = Array.from(scriptDataHash.to_bytes())
    .map(byte => byte.toString(16).padStart(2, '0'))
    .join('');
    console.log(a)
    txBody.set_script_data_hash(scriptDataHash);

    txBody.set_collateral(inputs)

    const baseAddress = BaseAddress.from_address(shelleyChangeAddress)
    const requiredSigners = Ed25519KeyHashes.new();
    requiredSigners.add(baseAddress.payment_cred().to_keyhash())

    txBody.set_required_signers(requiredSigners);

    const tx = Transaction.new(
        txBody,
        TransactionWitnessSet.from_bytes(transactionWitnessSet.to_bytes())
    )

    let txVkeyWitnesses = await this.API.signTx(Buffer.from(tx.to_bytes(), "utf8").toString("hex"), true);
    txVkeyWitnesses = TransactionWitnessSet.from_bytes(Buffer.from(txVkeyWitnesses, "hex"));

    transactionWitnessSet.set_vkeys(txVkeyWitnesses.vkeys());

    const signedTx = Transaction.new(
        tx.body(),
        transactionWitnessSet
    );

    const submittedTxHash = await this.API.submitTx(Buffer.from(signedTx.to_bytes(), "utf8").toString("hex"));
    console.log(submittedTxHash)
    this.setState({submittedTxHash});

}