React - Implement a file upload component using Mui - reactjs

Question

I am trying to build a file upload component. Earlier I did use <input type="file"> but I have very little space to accomodate the input type and within the litle space, I have to display "Choose file" and the total file path. When I decrease the width, the component display is not too elegant to see.
This was my earlier code:
<label id="licensefile">
LicenseFile
<input
type="file"
name="personalLicense"
className={styles.personallicense}
/>
</label>
My CSS :
.personallicense{
position: absolute;
top: 78px;
left:250px;
width:50px;
padding: 0;
margin:0;
}
input[name="personalLicense"] {
width: 30px;
}
I have been looking for alternate using Mui
I want to build something like this:
import FileUploadOutlined from "#mui/icons-material/FileUploadOutlined";
import TextField from "#mui/material/TextField";
<label >
License
<TextField
variant="standard"
type="text"
InputProps={{
endAdornment: (
<FileUploadOutlined
onClick={() => {
handleUpload();
}}
>
</FileUploadOutlined>
),
}}
/>
</label>
How to invoke the file upload from the Mui thing similar to input type "file"
The total space to accomodate this component is almost 50 to 60 px. I cannot adjust more than that as it is an existing compoenent.

Answer 1

I got answer from other source but posting here for any future references:
<TextField
variant="standard"
type="text"
InputProps={{
endAdornment: (
<IconButton component="label">
<FileUploadOutlined />
<input
styles={{display:"none"}}
type="file"
hidden
onChange={handleUpload}
name="[licenseFile]"
/>
</IconButton>
),
}}
/>