I want to create a button on my site that will allow the user to upload a file from their device (computer, phone).

I have already made this button and it opens a window where you can select a file.

But I ran into a problem: I would like to display the name of this file on the page.

I have this component highlighted in orange:

```
   export default function BoxForChoiceFile() {
        return (
            <Card sx={styles.CommonStyle}>
                <SelectFileButton></SelectFileButton>
            </Card>
        );
    }

```

And in the BoxForChoiceFile component there is a button for choosing a file

```
    export default function SelectFileButton() {

    const fileInput = useRef();
    const selectFile = () => {
        fileInput.current.click();
    }

    return (
        <div>
            <input type="file" style={{ "display": "none" }} ref={fileInput} />
            <Button onClick={selectFile} className='btn btn-primary' sx={styles.DispositionBottom}>
                <span>Upload</span>
            </Button>
        </div>
    )
}

```