Изображение профиля не отображается после загрузки из локального хранилища с помощью ReactJS

Я новичок в ReactJs и работаю над проектом, который загружает файл данных изображения, преобразует его в URL-адрес и сохраняет в localStorage. После выбора файла отображается изображение. Эта часть рабочая.

Однако, когда я пытаюсь повторно отобразить файл с помощью localStorage.getItem ("ProfileImage"), изображение не отображается. Кроме того, если я выполняю жесткое обновление, даже состояние сбрасывается, и предварительный просмотр изображения исчезает. Интересно, может ли кто-нибудь помочь мне сказать, где я могу ошибиться:

import React, { Component } from 'react'

class ProfilePhoto extends Component {

    constructor(props) {
        super(props)

        this.state = {
            imgUrl: JSON.parse(localStorage.getItem("ProfileImage")) || []
        }
    }

    handleImageUpload = function (e) {

        //get the image file
        const selectedFile = e.target.files[0]

        //need to convert to acceptable format for posting...
        const imgData = window.URL.createObjectURL(selectedFile)

        //const ActiveUser = JSON.parse(localStorage.getItem("ActiveUser"))

        localStorage.setItem("ProfileImage", JSON.stringify(imgData))

        this.setState({
            imgUrl: imgData
        })

        console.info(imgData)

    }.bind(this)

    handleImageSave = function (e) {
        e.preventDefault();
        alert("Your profile image has saved!")

    }.bind(this)

    componentDidMount() {

     let ProfileImage = JSON.parse(localStorage.getItem("ProfileImage"))
     console.info(ProfileImage)

    }


    render() {

        return (
            <div className = "profile-photo">
                <div className = "img-preview">
                    <img src = {this.state.imgUrl} alt = "" />
                </div>

                <form id = "myPhotoForm" name = "myPhotoForm" onSubmit = {this.handleImageSave}>
                    <input type = "file" id = "imgUrl" name = "imgUrl" onChange = {this.handleImageUpload} />
                    <button type = "submit" value = "Submit!">Upload</button>
                </form>
            </div>
        )
    }
}

export default ProfilePhoto