Function components cannot have refs. Did you mean to use React.forwardRef()? : <p>Hi I am trying to choose file form my computer and display the file name on input field but I am getting this error</p>

<p>Function components cannot have refs. Did you mean to use React.forwardRef()</p>

<p><a href="https://stackblitz.com/edit/react-aogwkt?file=bulk.js" rel="noreferrer">https://stackblitz.com/edit/react-aogwkt?file=bulk.js</a></p>

<p>here is my code</p>

<pre><code>import React, { Component } from "react";
import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  FormControl,
  IconButton,
  Input,
  InputAdornment,
  withStyles
} from "@material-ui/core";
import Attachment from "@material-ui/icons/Attachment";
import CloudDownload from "@material-ui/icons/CloudDownload";
const BulkUpload = props =&gt; {
  const { classes } = props;
  return (
    &lt;div className="App"&gt;
      &lt;input
        id="file_input_file"
        className="none"
        type="file"
        ref={'abc'}
      /&gt;
      &lt;Input
        id="adornment-attachment"
        type="text"
        fullWidth

        endAdornment={
          &lt;InputAdornment position="end"&gt;
            &lt;IconButton
              aria-label="Toggle password visibility"
              onClick={e =&gt; {
              // this.refs['abc'].click();
              }}
              className="login-container__passwordIcon"
            &gt;
              &lt;Attachment /&gt;
            &lt;/IconButton&gt;
          &lt;/InputAdornment&gt;
        }
      /&gt;
    &lt;/div&gt;
  );
};

export default BulkUpload;
</code></pre>

<p>I just wanted to show selected file name on input field</p>
