Upgraded crypto-js from 3.1.9-1 to 4.2.0 in my react frontend project, my old code is throwing malformed UTF-8 error and not working as expected

This is my code and it was working fine with old version of crypto-js. With the upgrade the encrypted string from frontend is not getting decrypted in my java springboot backend. The encrypted string from backend is not getting decrypted in frontend and giving malformed UTF-8 error.

const iterationCount=1000;
const keySize= 128/32;

function generateKey(salt, passPhrase) {
  const key = CryptoJS.PBKDF2(
    passPhrase,
    CryptoJS.enc.Hex.parse(salt),
    { keySize, iterations: iterationCount });
  return key;
}

function encrypt(salt, iv, plainText) {
  const passPhrase = process.env.ENCRYPT_SECRET;
  const key = this.generateKey(salt, passPhrase);
  const encrypted = CryptoJS.AES.encrypt(
    plainText,
    key,
    {
      iv: CryptoJS.enc.Hex.parse(iv),
      mode: CryptoJS.mode.CTR,
      padding: CryptoJS.pad.NoPadding
    });
  return encrypted.ciphertext.toString(CryptoJS.enc.Base64);
}

function decrypt(salt, iv, cipherText) {
  const passPhrase = process.env.DECRYPT_SECRET;
  const key = this.generateKey(salt, passPhrase);
  const decrypted = CryptoJS.AES.decrypt(
    cipherText,
    key,
    {
      iv: CryptoJS.enc.Hex.parse(iv),
      mode: CryptoJS.mode.CTR,
      padding: CryptoJS.pad.NoPadding
    });
  return decrypted.toString(CryptoJS.enc.Utf8);
}

I tried multiple ways of resolving this but nothing worked so far. Anyone faced a similar issue?