Next.js React Component won't allow HTML in "export default" function

I’ve defined a Next.js (TypeScript/React) as follows:

'use client'
import React, { FunctionComponent } from 'react';
import { Uploader } from "uploader";
import { UploadButton } from "react-uploader";
import * as fs from 'fs';

const uploader = Uploader({
    apiKey: "free" // Get production API keys from Bytescale
  });
  
const options = { multi: true };

export default function Certificates() {
    return (
        <h1>Certificate Management</h1>
        <UploadButton uploader={uploader}
                  options={options}
                  onComplete={files => alert(files.map(x => fs.readFileSync(x.fileUrl, 'utf-8')).join("\n"))}>
        {({onClick}) =>
          <button onClick={onClick}>
            Upload Certificate...
          </button>
        }
      </UploadButton>
    );
}

As far as I can tell, I am doing everything correctly. But VSCode complains about the HTML in the function’s return statement, and the app won’t build. I’ve never in the past encountered a problem with exporting HTML from a component.

Why is it giving me this error? Am I missing a library?

>Solution :

You should return to single element, you can modify in this way

return (<>
         <h1>Certificate Management</h1>
         <UploadButton uploader={uploader}
                  options={options}
                  onComplete={files => alert(files.map(x => 
                  fs.readFileSync(x.fileUrl, 'utf-8')).join("\n"))}>
           {({onClick}) => <button onClick={onClick}>
                           Upload Certificate...
                         </button>}
         </UploadButton>
      </>
    );