I noticed today that while using a custom onChange in a Form.Control that the text in the field no longer changes when a file is selected. I have looked through the documentation on the Git HERE but it doesnt say how to change the text with a custom event.

my code:

    // handles when a file has been selected. 
    const handleUploadChange = (event) =>
    {
        setFileToUpload(event.target.files[0]);
        setIsFilePicked(true);
    }

    // Footer containing buttons and file selection
    const CardFooter = () =>{
        return(
            <Card.Footer>
                <div style={{width:"80%", display : "flex", flexDirection: "row", justifyContent: "center"}}>
                    <div style={{marginRight: "40px"}}>
                        <Form.Group controlId="formFile" className="mb-3">
                            <Form.Control type="file" custom onChange={handleUploadChange} label={fileToUpload === null ? "No File Selected" : fileToUpload.name}/>
                        </Form.Group>
                    </div>
                    <div className="btn-red" style={{marginRight: "40px"}}>
                        <Button disabled={fileToUpload === null} onClick={()=>{setFileToUpload(null); setIsFilePicked(false);}}>Clear</Button>
                    </div>
                    <div>
                        <Button disabled={(fileToUpload === null) || (fileToUpload.size >= maxUploadSizeInBytes)} onClick={()=>handleSubmit(fileToUpload)}>Upload</Button>
                    </div>
                </div>
            </Card.Footer>
        )
    }

As you can see here, once a file is selected, my change event happens, but the selection box still reads "No file chosen". I have attempted label, text, displayName , and placeholder like so: label={fileToUpload === null ? "No File Selected" : fileToUpload.name}

Does anyone know the proper prop to use with a custom onChange ?