Upload and retrieve image in React

I would like to upload, read and preview an image. This is what I have tried:

const fileSelector = document.createElement('input');
        fileSelector.setAttribute('type', 'file');
        const inputRef = useRef()
...
const openFile = (e) => {
            fileSelector.click();
            console.log(inputRef.current)
        }
...
<label htmlFor="photo-upload" className="custom-file-upload fas">
                        <div className="img-wrap img-upload">
                            <img
                                alt="..."
                                className="avatar border-gray"
                                src={`http://127.0.0.1:8000/media/${user.photo.replace(/['"]+/g, '')}`}
                            />
                        </div>
                        <Button
                            id="photo-upload"
                            type="file"
                            className="btn-round"
                            color="primary"
                            ref={inputRef}
                            onClick={openFile}>
                            Change Profile Picture</Button>
                    </label>

I don’t get an error message but cannot view/access the picture I have uploaded