Try new way of fixing this nonsense

app/routes/report.tsx

@@ -14,6 +14,7 @@ import {
   Stack,
   Text,
   Textarea,
+  useMultiStyleConfig,
   useToast,
 } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
@@ -46,7 +47,6 @@ export function meta() {
 export default function () {
   const [fileProgress, setFileProgress] = useState(0);
   const [submissionType, setSubmissionType] = useState("exploit");
-  const [fileNames, setFileNames] = useState([] as string[]);
   const [showSuccess, setShowSuccess] = useState(false);
   const toast = useToast();
   const [uploading, setUploading] = useState(false);
@@ -312,26 +312,17 @@ export default function () {
           >
             Select File
           </Button>
-          <input
+          <Input
             id="evidence"
-            multiple
-            onChange={(e) => {
-              const names = [];
-
-              for (let i = 0; i < (e.target.files?.length || 0); i++) {
-                const file = e.target.files?.item(i);
-
-                if (file) names.push(file.name);
-              }
-
-              setFileNames(names);
+            sx={{
+              "::file-selector-button": {
+                border: "none",
+                outline: "none",
+                ...useMultiStyleConfig("Button", { colorScheme: "blue" }),
+              },
             }}
-            style={{ display: "none" }}
             type="file"
           />
-          <Text>
-            {fileNames.length ? fileNames.join(", ") : "No files chosen"}
-          </Text>
         </FormControl>
         <br />
         <FormControl>