How to Reset a File Input in React.js ?

// Filename - App.js

import React, { useRef } from "react";

export default function App() {

    // Style object for the container div
    const container = {
        margin: "5rem",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
    };

    // Style object for the input element
    const input = {
        width: "400px",
        padding: "8px",
        border: "1px solid #ccc",
        borderRadius: "4px",
        fontSize: "14px",
        boxShadow: "0px 0px 10px 0px grey",
    };

    // Style object for the button element
    const button = {
        marginTop: "1rem",
        padding: "10px 10px 10px 10px",
        border: "none",
        borderRadius: "8px",
        backgroundColor: "green",
        color: "#fff",
        fontSize: "1rem",
        cursor: "pointer",
        transition: "all linear 0.5s",
        boxShadow: " 0px 0px 10px 0px grey",
    };

    // Ref object to reference the input element
    const inputFile = useRef(null);

    // Function to reset the input element
    const handleReset = () => {
        if (inputFile.current) {
            inputFile.current.value = "";
            inputFile.current.type = "text";
            inputFile.current.type = "file";
        }
    };

    // Render function to display the input 
    // element and the reset button
    return (
        <div style={container}>
            <input style={input} 
                type="file" ref={inputFile} />
            <button style={button} 
                onClick={handleReset}>
                Reset Input
            </button>
        </div>
    );
}