webkitdirectory in typescript and react

Question

The exact error is

Type '{ webkitdirectory: string; type: "file"; }' is not assignable to type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'.
  Property 'webkitdirectory' does not exist on type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'.ts(2322)

or

Type '{ webkitdirectory: true; multiple: true; type: "file"; }' is not assignable to type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'.
  Property 'webkitdirectory' does not exist on type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'.ts(2322)
(JSX attribute) webkitdirectory: true

The components just have a simple input with webkitdirectory, I've also tried webkitdirectory=''

import React from "react";

function FolderUpload() {
  return (
    <div className="FolderUpload">
      <input  webkitdirectory="" type="file" /> // webkitdirectory has the error
    </div>
  );
}

export default FolderUpload;

I understand its non-standard but its covered in the major desktop browsers which is enough for this project https://caniuse.com/input-file-directory and the moz doc https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory

Answer 1

Just adding one small thing to @kob003's answer, which I needed additionally apart from the answers provided here,

First I did this:

declare module "react" {
    interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
        webkitdirectory?: string;
    }
}

But it was still throwing error , then I changed

      <input  webkitdirectory type="file" />

to

      <input  webkitdirectory="" type="file" />

to be fully error free.