How do I get the base64 of a file upload in React.js?

Question

This original code included ".name" but I changed it to ".base64." When it included ".name" it produced "file name: file." I need the base64 of a file for the application I am building and with the code below am attempting to produce "file name: base64 (whatever that may be)." It says my object is not a blob and is currently producing "file name: undefined." How do I fix this?

import { useState } from "react";
import { FileUploader } from "react-drag-drop-files";
import FileBase64 from 'react-file-base64';

export default function DragDrop() {
  const [file, setFile] = useState(null);
  const handleChange = (file) => {
    setFile(file);
    
  };
  return (
    <div className="DragDrop">
      <h1>Drag & Drop Files</h1>
      <FileUploader
        multiple={true}
        handleChange={handleChange}
        name="file"
        //types={fileTypes}
      />
      //.base was .name before I changed it.
      <p>{file ? `File name: ${file[0].base64}` : "no files uploaded yet"}</p>
    </div>
  );
}