How to make a component with a function

Question

PURE CODE

<input type="text" id="nf" placeholder="Nota Fiscal" />
<input type="text" id="cnpj" placeholder="CNPJ" />
<input type="button" value="Buscar" onclick="buscarNF()" />

<script type="text/javascript">
    function buscarNF(){
        var nf = document.getElementById('nf').value;
        var cnpj = document.getElementById('cnpj').value.replace(/[^0-9]/g, '');
        window.location = 'https://web.bsoft.com.br/rastrear/notafiscal/wy4R8qaVcWgaKnFS/'+ nf+'/'+cnpj;
    }
</script>

I tried to do in 2 files, but in vscode it says "Compiled successfully", but in the browser it shows errors

GALLERY JS ARCHIVE

import buscarNF from '../util'

export const Gallery = () =>{  
  return( 
      <buscarNF>
       <form>
         <label>
           <input type="text" id="nf" placeholder="Nota Fiscal" />
           <input type="text" id="cnpj" placeholder="CNPJ" />
           <input type="button" value="Buscar" onClick={buscarNF()}/>
         </label>
       </form>
     </buscarNF>)
 }

UTIL JS FILE

function buscarNF(props){  
    const nf = document.getElementById('nf').value;
    const cnpj = document.getElementById('cnpj').value.replace(/[^0-9]/g, '');
    window.location = 'https://web.bsoft.com.br/rastrear/notafiscal/wy4R8qaVcWgaKnFS/'+ nf+'/'+cnpj;
}

export default buscarNF;