Как сослаться на путь, хранящийся в mongodb в моем компоненте реакции?

Question

Я использую express -fileupload для загрузки изображения на сервер mongodb:

. js

const fileUpload = require('express-fileupload');
app.use(fileUpload())

Затем в контроллере для загрузки В маршруте я изменяю значение свойства изображения на то, что я выбираю из интерфейса пользователя:

upload.controller. js

const avatar = (req, res) => {
    const file = req.files.file;

    User.findByIdAndUpdate(
        req.params.uid, 
        { $set: { 
            avatar: { 
                fileName: file.name, 
                filePath: `public/uploads/${file.name}` }
            }
        }, 
        { new: true, upsert: true })
            .exec((error, user) => {
                if (error) {
                    return res.status(400).json({
                        message: error.message,
                    });
                }

                if (req.files === null) {
                    return res.status(400).json({
                        message: 'No file uploaded',
                    });
                }

                file.mv(`public/uploads/${file.name}`, error => {
                    if (error) {
                        return res.status(500).json({
                            message: error.message,
                        });
                    }

                    res.status(200).json({
                        user,
                    });
                })
            });
};

Затем в React я делаю отправьте запрос на поставку на соответствующий маршрут и сохраните ответ в локальном хранилище: isAuthenticated () - это функция, которая возвращает объект, сохраненный в локальном хранилище

const [selectedFile, setSelectedFile] = React.useState(isAuthenticated().avatar);

const fileSelectedHandler = evt => setSelectedFile(evt.target.files[0]);

    const uploadProfileImage = async evt => {
        evt.preventDefault();

        const formData = new FormData();
        formData.append('file', selectedFile);

        try {
            const response = await axios.put(`${keys.SERVER_URL}/avatar/${isAuthenticated()._id}`, formData, {
                headers: {
                    'Content-Type': 'multipart/form-data',
                }
            }); 

            localStorage.setItem(localStorageName, JSON.stringify({ ...isAuthenticated(), avatar: response.data.user.avatar }));
            console.log(response)
        } catch (error) {
            console.log(error.response.data.message);
        }
    }

Затем я хочу отобразить изображение, ссылаясь на путь сохранено в локальном хранилище, например так:

<div className="App_profile_avatar">
                        <img src={`../..${selectedFile.filePath}`} />

                            <form onSubmit={uploadProfileImage}>
                                <input type="file" name="profile-image" onChange={fileSelectedHandler} id='profileImage' />
                                <input type="submit" value='Upload' />
                            </form>
                            <span>Add Photo</span>
                            {/* <i className="fas fa-pen"></i> */}
                    </div>

У меня есть это свойство в localStorage, которое подается из mongodb:

{
    avatar: {
        fileName: "eye.jpg",
        filePath: "./client/public/uploads/eye.jpg"
    }
}