multer画像をupdate(編集)することができない

現在フロントにreact、バックにexpressを使いサイトを作成しており、画像をアップロードする必要がありmulterを使っています。問題としてはアップロードすることはできるのですが、その画像を他の画像に変更することができません。正確にはデータベスの内容は更新しているのですが画像名がアップロードしたローカルの画像のままになっておりreq.file.filenameでファイル名が変更できず変更したい画像を表示できません。
画像をアップデートする方法教えてください。
また複数の画像のアップロードのしかたも教えていただきたいです。
よろしくお願いします。

about.js

JavaScript

let express = require('express'),
    multer = require('multer'),
    mongoose = require('mongoose'),
    uuidv4 = require('uuid/v4'),
    router = express.Router();
const DIR = './public/';
const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, DIR);
    },
    filename: (req, file, cb) => {
        const fileName = file.originalname.toLowerCase().split(' ').join('-');
        cb(null, uuidv4() + '-' + fileName)
    }
});
var upload = multer({
    storage: storage,
    fileFilter: (req, file, cb) => {
        if (file.mimetype == "image/png" || file.mimetype == "image/jpg" || file.mimetype == "image/jpeg") {
            cb(null, true);
        } else {
            cb(null, false);
            return cb(new Error('Only .png, .jpg and .jpeg format allowed!'));
        }
    }
});
let About = require("../models/about.model")
router.route("/").get((req, res) => {
    About.find()
        .then(about => res.json(about))
        .catch(err => res.status(400).json("Error: " + err));
})
router.post('/add', upload.single('photo'), (req, res, next) => {
    const url = req.protocol + '://' + req.get('host')
    const introduction = req.body.introduction;
    const photo = url + '/public/' + req.file.filename;
    const newAbout = new About({
        introduction,
        photo
    });
    newAbout.save().then(result => {
        res.status(201).json({
            photo: result.photo
        })
    }).catch(err => {
        console.log(err),
            res.status(500).json({
                error: err
            });
    })
})
router.route('/:id').get((req, res) => {
    About.findById(req.params.id)
        .then(about => res.json(about))
        .catch(err => res.status(400).json('Error: ' + err));
});
router.route('/:id').delete((req, res) => {
    About.findByIdAndDelete(req.params.id)
        .then(() => res.json('About deleted.'))
        .catch(err => res.status(400).json('Error: ' + err));
});

router.put('/update/:id', upload.single('photo'), (req, res) => {
    
    const url = req.protocol + '://' + req.get('host')
    const introduction = req.body.introduction;
    const photo = url + '/public/' + req.file.filename;
    let { id } = req.params
    About.findById(id)
        .then(about => {
            about.introduction = introduction
            about.photo = photo
            about.save()
                .then(about => res.send(about))
                .catch(err => console.log(err))
        })
        .catch(err => console.log(err))
})

module.exports = router;

EditAbout.js

import React, { Component } from 'react';
import axios from "axios";
export default class EditAbout extends Component {
    constructor(props) {
        super(props)
        
        this.onChangeIntroduction = this.onChangeIntroduction.bind(this);
        this.onPhotoChange = this.onPhotoChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
        this.state = {
            introduction: "",
            photo: ""
        }
    }
    componentDidMount() {
        axios.get('/about/' + this.props.match.params.id)
            .then(response => {
                this.setState({
                    introduction: response.data.ja_introduction,
                    photo: response.data.photo
                })
            })
            .catch(function (error) {
                console.log(error);
            })
    }
    
    onChangeIntroduction(e) {
        this.setState({
            introduction: e.target.value
        })
    }
    onPhotoChange(e) {
       this.setState({
            photo: e.target.files[0].name
        })
    }
    onSubmit(e) {
        e.preventDefault();
        const about = {
            introduction: this.state.introduction,
            photo: this.state.photo
        }
        console.log("TESTTTT ABOUT", about);
        axios.put('/about/update/' + this.props.match.params.id, about)
            .then(res => console.log(res.data));
        this.setState({
            introduction: "",
            photo: ""
        })
    }
    render() {
        return (
            <div className="container">
                <div className="row">
                    <form onSubmit={this.onSubmit} enctype="multipart/form-data">
                        <div className="form-group">
                            <label>Introduction: </label>
                            <input type="text"
                                required
                                className="form-control"
                                name="introduction"
                                value={this.state.introduction}
                                onChange={this.onChangeIntroduction}
                            />
                        </div>
                        <div className="form-group">
                            <input type="file" name="photo" onChange={this.onPhotoChange} />
                        </div>
                        <div className="form-group">
                            <button className="btn btn-primary" type="submit" onSubmit={this.onSubmit}>Upload</button>
                        </div>
                    </form>
                </div>
            </div >
        )
    }
}