interface ValidateFormatInterface{
    file?: string;
    enableFormats?: string[];
}

export const  ValidateFormat = ( { file, enableFormats } : ValidateFormatInterface ) => {

    let validFormat = true;
    let error = false;
    let description;

    if(!Array.isArray(enableFormats)){
        error = true
        description = "The second Argument passed must be  an array"

    }else{
        enableFormats.map(  format =>{
            if ( format !=  file.split('.')[1]){
                 validFormat = false;
                 description = "invalid format to load"
            }
       } )
    }

    return {
         validFormat,
         error,
         description
    };
}


==========================================


import React, { useState } from 'react'
import { ValidateFormat } from '../utils/Utils'
import PropTypes  from 'prop-types';

interface ImageInterface {
    image:string;
    show:boolean;
}

const HubImage = ( props:ImageInterface ) => {


    const [ image, setImage] = useState<string>(props.image);
    const [ showSpinner,  setShowSpinner ] = useState(false)



    const  encodeImageFileAsURL = (element : any) => {

        var file = element.files[0];

        let format : string[] =  ['jpeg', 'jpg', 'png', 'gif', 'bmp']
        let validFormat = ValidateFormat(file.name, format  ) // linea del error de tipo
        console.log(validFormat)

        var reader : FileReader = new FileReader();
        reader.onloadend =  () => {
            if (reader.readyState == 2) {
                setShowSpinner(false)
                let result: any = reader.result
                setImage(result);
            }
        }

        if (reader.readyState == 0)  setShowSpinner(true)
        reader.readAsDataURL(file);

    }

    const uploadImage =  ( e:  React.ChangeEvent<HTMLInputElement> ): any =>  encodeImageFileAsURL(e.target);

    return(
        <div>
            {
                showSpinner ? <img src="/static/assets/oval.svg"/> : ''
            }
            <img src={image}/>
            <input type="file"  name="file" onChange={uploadImage}  />
        </div>
    )
}


HubImage.defaultProps = {
    image:'https://via.placeholder.com/200x150?text=Load Image',
    show:false
}

HubImage.propTypes = {
    images : PropTypes.string,
    show:PropTypes.bool
}

export default HubImage;