I have the following code for an Ionic React component that uses the ZXing/library.
The component uploads the CB image files without problems, but cannot do the documenting, returning the following error: “Uncaught (in promise) NotFoundException2: No MultiFormat Readers were able to detect the code.”
Can anyone give me an idea why BrowserMultiformatReader fails?

Given an image in any barcode format, you must upload the file, present the image on the screen, and return the code in text format. The return of the text is done by the ZXing library, which does not seem to recognize the code with the specified format.
This is the code:

    import React, { useRef, useState } from 'react';
    import { BrowserMultiFormatReader, BarcodeFormat, DecodeHintType, Result } from '@zxing/library';
    import './BarcodeScanner.css'; // Importamos los estilos CSS

    const BarcodeScanner: React.FC = () => {
        const fileInputRef = useRef<HTMLInputElement>(null);
        const [capturedImage, setCapturedImage] = useState<string | null>(null);
        const [barcodeResult, setBarcodeResult] = useState<string | null>(null);

        const captureImageFromFile = (file: File) => {
            try {
                const reader = new FileReader();
                reader.onload = async () => {
                    console.log(reader.result);
                    if (typeof reader.result === 'string') {
                        setCapturedImage(reader.result);
                        decodeBarcode(reader.result);
                    }
                };
                reader.readAsDataURL(file);
             } catch (error) {
                 setBarcodeResult("Error al decodificar");
                 console.error('Error al decodificar el código de barras:', error);
             }
         };

        const decodeBarcode = async (imageSrc: string) => {
            try {
                const img = new Image();
                img.onload = async () => {
                    const formats = [BarcodeFormat.EAN_13, BarcodeFormat.EAN_8];
                    const hints = new Map();
                    hints.set(DecodeHintType.POSSIBLE_FORMATS, formats);
                    const codeReader = new BrowserMultiFormatReader(hints);
                    codeReader.timeBetweenDecodingAttempts = 300;
                    const result = await codeReader.decodeFromImage(img as HTMLImageElement);
                    setBarcodeResult(result.getText());
                }
                img.src = imageSrc;
            } catch (error) {
                setBarcodeResult("Error al decodificar");
                console.error('Error al decodificar el código de barras:', error);
            }
        };

        const handleFileInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
            const file = event.target.files && event.target.files[0];
            if (file) {
                captureImageFromFile(file);
            }
        };

        return (
            <div>
                <h1>Captura de Imagen desde Archivo</h1>
                <div style={{ marginTop: '20px', textAlign: 'center' }}>
                    <input type="file" accept="image/*" onChange={handleFileInputChange} ref={fileInputRef} style={{ display: 'none' }} />
                    <button onClick={() => fileInputRef.current?.click()}>Seleccionar Archivo</button>
                </div>
                {capturedImage && (
                    <div style={{ marginTop: '20px', textAlign: 'center' }}>
                        <h2>Captura Realizada</h2>
                        <img src={capturedImage} alt="Captura" style={{ maxWidth: '320px' }} />
                    </div>
                )}
                {barcodeResult && (
                    <div style={{ marginTop: '20px', textAlign: 'center' }}>
                        <h2>Resultado del Código de Barras</h2>
                        <p>{barcodeResult}</p>
                    </div>
                )}
            </div>
        );
    };

    export default BarcodeScanner;