Изменение статического img на новый img через hiddenFileInput, но отображается в виде кнопки (реагировать)

#reactjs

Вопрос:

 import React from 'react'; import styled from 'styled-components';  const Button = styled.button;  const FileUploader = props =gt; {  const hiddenFileInput = React.useRef(null);    const handleClick = event =gt; {  hiddenFileInput.current.click();  };   const handleChange = event =gt; {  const fileUploaded = event.target.files[0];  const reader = new FileReader();  reader.onload = () =gt; {  if(reader.readyState === 2) {  this.setState({profileImg: reader.result})  }  }  reader.readAsDataURL(event.target.files[0])  props.handleFile(fileUploaded);  };   const profileImg ='https://gravatar.com/avatar/daaa57535a70b34bc8674de53d02dc25?s=200amp;d=mpamp;r=pg'   return (  lt;gt;  lt;img  src={profileImg}  class="img-fluid rounded-pill"  alt=""  /gt;  lt;Button   className="btn   btn-secondary d-flex justify-content-start"   type="button"   onClick={handleClick}  gt;  lt;i className="fa fa-fw fa-camera"gt;lt;/igt;  Change avatar  lt;/Buttongt;  lt;input type="file" accept="image/*" id="input"  ref={hiddenFileInput}  onChange={handleChange}  style={{display:'none'}}   /gt;   lt;/gt;  ); };  export default FileUploader;  

Мой вопрос в том, как я могу заставить это работать, кнопка теперь работает как вход, как я хочу, но я, похоже, не могу profileImg изменить ее в onChange качестве нового входного изображения, которое я выбираю для ввода.