JSFiddle - React, Tailwind, and code Playground

HTML

<label for="exampleFormControlInput1" class="form-label"><b>Elija una Imagen </b></label>
      <input type="file" class="form-control" name="imagen"  id="archivoInput" accept=".jpg, .jpeg, .png, .jpeg" onchange="return validarExt()"><br>
      <input type="button" onclick="return vacio();"  value="probar">

JavaScript

function vacio(){
 var archivoInput = document.getElementById('archivoInput');
   if(archivoInput.value == ""){
    alert('Seleccione un Archivo');
   return false;
   }
}
function validarExt()
{
    var archivoInput = document.getElementById('archivoInput');
    var files = document.getElementById('archivoInput').files;
    var zero= document.getElementsByName('imagen');
    var archivoRuta = archivoInput.value;
    var extPermitidas = /(.png|.gif|.jpg|.jpeg)$/i;
    
 
    if(!extPermitidas.exec(archivoRuta)){
        alert('Asegurese de haber seleccionado una Imagen');
        archivoInput.value = '';
        return false;
    }
    if(zero.length=="") {
      alert("selecciones un archivo");
      return false;
    }
  
  }