the problem is that Aes-128-cbc encrypted video is transmitted by the server, I am decryto the data in react js application, all the data is decrypt, but the video is not playing, there is no error, I don’t know how to do it , i tried to use blob url which is also not useful

import React, { useEffect, useState, useRef } from "react";
import axios from "axios";
import CryptoJS from "crypto-js";
import videojs from "video.js";
import "video.js/dist/video-js.css";

const VideoPlayer = ({ src }) => {
  const videoRef = useRef(null);
  const [videoData, setVideoData] = useState(null);

  useEffect(() => {
    const key = "aSecretKey12345678";

    axios
      .get(src, { responseType: "arraybuffer" })
      .then((response) => {
        const encryptedData = new Uint8Array(response.data);
        const decryptedData = CryptoJS.AES.decrypt(
          { ciphertext: CryptoJS.lib.WordArray.create(encryptedData) },
          CryptoJS.enc.Utf8.parse(key),
          {
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.Pkcs7,
            iv: CryptoJS.enc.Hex.parse("0000000000000000"),
          }
        );
        setVideoData(new Uint8Array(decryptedData.words));
      })
      .catch((error) => console.error("Error fetching encrypted data:", error));
  }, [src]);

  useEffect(() => {
    if (videoData) {
      const player = videojs(videoRef.current, { controls: true, fluid: true });
      player.src({ src: videoData, type: "video/mp4" });
      return () => player.dispose();
    }
  }, [videoData]);

  console.log(videoData, videoRef);

  return (
    <div data-vjs-player>
      <video
        ref={videoRef}
        preload="metadata"
        playsInline
        className="video-js vjs-default-skin"
        controls
      />
    </div>
  );
};