Material UI upload button showing no file chosen - reactjs

Question

I am trying to use one of the MU upload buttons with ReactJS, with the exact code from the official page (4th button, with the icon): https://material-ui.com/components/buttons/#upload-button
I've imported all the needed dependencies, and my React code for this button is as follows:
import { makeStyles } from "#material-ui/core/styles";
import Button from "#material-ui/core/Button";
import IconButton from "#material-ui/core/IconButton";
import PhotoCamera from "#material-ui/icons/PhotoCamera";
import "./SignUp.css";
const useStyles = makeStyles(theme => ({
root: {
"& > *": {
margin: theme.spacing(1)
}
}
}));
function SignUp() {
const classes = useStyles();
return (
<label htmlFor="icon-button-file">
<IconButton
color="primary"
aria-label="upload picture"
component="span"
>
<PhotoCamera />
</IconButton>
</label>
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
However I'm seeing this fairly ugly "Choose file" - no file chosen button. I should only be seeing the camera icon at the bottom.
enter image description here
Could anyone point me in the right direction?

Answer 1

I found the issue. I had forgotten to add this piece of code:
input: {
display: "none"
}
This goes into the useStyles function.

Answer 2

This might help you Link in same way.
import React from "react";
import "./styles.css";
import IconButton from "#material-ui/core/IconButton";
import PhotoCamera from "#material-ui/icons/PhotoCamera";
export default function App() {
return (
<div className="App">
<IconButton>
<PhotoCamera />
</IconButton>
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}