So here is my code in react and ffmpeg and wasm which I used to create a simple video editor to just apply audio on top of the image and convert it into mp3

This is my code :

import React, { useState, useEffect } from 'react';
import { FFmpeg } from '@ffmpeg/ffmpeg';
import { fetchFile, toBlobURL } from '@ffmpeg/util';

function App() {
  const [videosrc, setvideosrc] = useState('');
  const [imgfile, setimgfile] = useState(null);
  const [audiofile, setaudiofile] = useState(null);
  const [ffmpeg, setFfmpeg] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    const load = async () => {
      try {
        const ffmpegInstance = new FFmpeg();
        ffmpegInstance.on('log', ({ message }) => console.log(message));
        await ffmpegInstance.load({
          coreURL: await toBlobURL(`http://localhost:5173/node_modules/@ffmpeg/core/dist/ffmpeg-core.js`, 'text/javascript'),
          wasmURL: await toBlobURL(`http://localhost:5173/node_modules/@ffmpeg/core/dist/ffmpeg-core.wasm`, 'application/wasm'),
        });
        setFfmpeg(ffmpegInstance);
        console.log('FFmpeg loaded successfully');
      } catch (err) {
        console.error('Failed to load FFmpeg:', err);
        setError('Failed to load FFmpeg');
      }
    };
    load();
  }, []);

  const createVideo = async () => {
    console.log('Create Video button clicked');
    setLoading(true);
    setError(null);

    if (!ffmpeg) {
      console.error('FFmpeg not loaded');
      setError('FFmpeg not loaded');
      setLoading(false);
      return;
    }

    if (!imgfile || !audiofile) {
      console.error('Image or audio file not selected');
      setError('Please select both image and audio files');
      setLoading(false);
      return;
    }

    try {
      console.log('Writing files to MEMFS');
      await ffmpeg.writeFile('image.png', await fetchFile(imgfile));
      await ffmpeg.writeFile('sound.mp3', await fetchFile(audiofile));

      console.log('Running FFmpeg command');
      await ffmpeg.exec([
        "-framerate", "1/10",
        "-i", "image.png",
        "-i", "sound.mp3",
        "-c:v", "libx264",
        "-t", "10",
        "-pix_fmt", "yuv420p",
        "-vf", "scale=1920:1080",
        "test.mp4"
      ]);

      console.log('Reading output file');
      const data = await ffmpeg.readFile('test.mp4');

      console.log('Creating URL for video');
      const url = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
      setvideosrc(url);
      console.log('Video created successfully');
    } catch (err) {
      console.error('Error creating video:', err);
      setError(`Error creating video: ${err.message}`);
    } finally {
      setLoading(false);
    }
  };

  const handlechangeimage = (e) => {
    setimgfile(e.target.files[0]);
  };

  const handlechangesound = (e) => {
    setaudiofile(e.target.files[0]);
  };

  return (
    <div>
      <h1>Image</h1>
      <input type="file" accept='image/*' onChange={handlechangeimage} />
      <h1>Audio</h1>
      <input type="file" accept='audio/*' onChange={handlechangesound} />
      <button onClick={createVideo} disabled={loading}>
        {loading ? 'Creating Video...' : 'Create Video'}
      </button>
      {error && <p style={{color: 'red'}}>{error}</p>}
      {videosrc && (
        <div>
          <h2>Generated Video:</h2>
          <video controls src={videosrc} />
        </div>
      )}
    </div>
  );
}

export default App;

Version which I am using is : “@ffmpeg/ffmpeg”: “^0.12.7”,
“@ffmpeg/util”: “^0.12.1”,
“@ffmpeg/core”: “^0.12.3”,

Is it issue with the version / Blob URL I cant understand please help me out , to run ffmpeg in my system.