Upload files, according to characteristics and be able to delete or add them in ReactJS

Question

I have the following problem. I can upload a document of a certain type, I would like to know how to establish the validation that it does not exceed 5MB.

You can evidence that I can upload files and show them in the table, then when I delete the file and try to upload it again, it doesn't show.

Attached link, where I can validate the complete operation, since it has the corresponding libraries:

https://codesandbox.io/s/subir-eliminar-archivo-yf6jr?file=/src/UploadDocument.js

I also share code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import "./styles.css";
import UploadDocument from "./UploadDocument"

export default function App() {
  return (
    <>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <UploadDocument />
    </>
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import { useFileUpload } from "use-file-upload";
import styled from "styled-components";

export default function UploadDocument() {
  const [file, selectFile] = useFileUpload();
  const [file2, selectFile2] = useFileUpload();

  const removeFile = (name) => {
    const newFiles = file2.filter((file) => file.name !== name);
    selectFile2(newFiles);
  };

  return (
    <>
      <PrimaryButton
        onClick={() => {
          // Single File Upload accepts only images
          selectFile(
            {
              accept: "image/*, application/pdf,application/vnd.ms-excel"
            },
            ({ source, name, size, file }) => {
              // file - is the raw File Object
              console.log({ source, name, size, file });
              // Todo: Upload to cloud.
            }
          );
        }}
      >
        team tag*
      </PrimaryButton>

      <br />
      <br />

      <SecondaryButton
        onClick={() => {
          // Single File Upload accepts only images
          selectFile2(
            {
              accept: "image/*, application/pdf,application/vnd.ms-excel"
            },
            ({ source, name, size, file }) => {
              // file - is the raw File Object
              console.log({ source, name, size, file });
              // Todo: Upload to cloud.
            }
          );
        }}
      >
        technical certificate (optional)
      </SecondaryButton>

      {/* <img src={file.source} alt="preview" /> */}
      <div className="tabla">
        <p className="titulo-tabla">Files for Homologation</p>
        <table className="table table-bordered">
          <tr>
            <th>File Name</th>
            <th>Uploaded File</th>
            <th>Action</th>
          </tr>
          <tr>
            <td data-th="etiqueta">Document #1</td>
            <td data-th="archivo" id="archivo1">
              {file ? <span>{file.name}</span> : <span>No Data</span>}
            </td>
            <td data-tj="accion">
              <button
                type="button"
                class="btn btn-warning"
                onClick={() =>
                  (document.getElementById("archivo1").innerHTML =
                    "<span>Sin Datos</span>")
                }
              >
                REMOVE
              </button>
            </td>
          </tr>
          <tr>
            <td data-th="etiqueta">Document #2 (opcional)</td>
            <td data-th="archivo" id="archivo2">
              {file2 ? <span>{file2.name}</span> : <span>No Data</span>}
            </td>
            <td data-tj="accion">
              <button
                type="button"
                class="btn btn-warning"
                onClick={() =>
                  (document.getElementById("archivo2").innerHTML =
                    "<span>Sin Datos</span>")
                }
              >
                REMOVE
              </button>
            </td>
          </tr>
        </table>
      </div>
    </>
  );
}

const Boton = styled.button`
  border-radius: 20px;
  border: 2px solid #1766dc;
  background: #1766dc;
  color: #ffff;
  cursor: pointer;
  display: block;
  font: normal bold 15px "Works Sans", sans-serif;
  padding: 15px 10px;
  transition: 0.3s ease all;
  width: 30%;

  &:hover {
    background: #004884;
    border-color: #004884;
  }
`;

const PrimaryButton = styled(Boton)`
  background-color: #1766dc;
  color: #ffff;
  width: 25%;
  height: auto;
  padding: 10px 10px 10px 10px;
`;

const SecondaryButton = styled(Boton)`
  background-color: #ffff;
  color: #1766dc;
  width: 58%;
  height: auto;
  padding: 10px 10px 10px 10px;
  margin: -30px 0px 20px 0px;

  &:hover {
    background: #004884;
    color: #ffff;
  }
`;