const Selectfile = () => {
        const handleFileSelect = (event: React.MouseEvent<HTMLButtonElement>) => {
              const fileInput = document.createElement('input');
              fileInput.type = 'file';
              fileInput.accept = 'image/*';
              fileInput.onchange = handleFileChange;
              fileInput.click();
            };
      
        const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
          const selectedFile = event.target.files?.[0];
          if (selectedFile) {
            console.log('Selected file:', selectedFile);
          }
        };
      
        return (
          <div>
            <button
              className="selectFileButton"
              onClick={handleFileSelect}
            >
              Select File
            </button>
          </div>
        );
      };

Type ‘(event: ChangeEvent) => void’ is not assignable to type ‘(this: GlobalEventHandlers, ev: Event) => any’.
Types of parameters ‘event’ and ‘ev’ are incompatible.
Type ‘Event’ is missing the following properties from type ‘ChangeEvent’: nativeEvent, isDefaultPrevented, isPropagationStopped, persist

how can I add a new select file function button in the chatbot with JS/ react?