how to change the image i chosen but first setting the image i chosen when i register as a value in a input field

import React from 'react'
import { Link, useNavigate, useParams } from 'react-router-dom';

import { useEffect, useState } from 'react'
import Form from "react-bootstrap/Form"
import axios from "axios";
const StaffForm = (props) => {
    const [delivery, setDelivery] = useState([])
    const [loading, setLoading] = useState(true)
    const [formErrors, setFormErrors] = useState({})
  const navigate=useNavigate();
    const {id} = useParams();  
    useEffect(() => {
      setLoading(true)
      axios.request({
        method: 'get',
        headers: {
          "Content-Type": "multipart/form-data",
          "Authorization": `Bearer ${JSON.parse(localStorage.getItem("authTokens")).access}`
        },
        url: `there is an api just don't what to show it`
      }).then(res => {
        console.log(res.data)
        setDelivery(res.data)
        setLoading(false)
      })
    }, [])
    const handleSubmit = (event) => {
      event.preventDefault();
      const data = {
        "profile_picture": event.target.profile_picture.files[0],
        "birthdate": event.target.birthdate.value,
        "identification_card": event.target.identification_card.files[0]
    }
      axios.request({
        method: 'patch',
        headers: {
          "Content-Type": "multipart/form-data",
          "Authorization": `Bearer ${JSON.parse(localStorage.getItem("authTokens")).access}`
        },
        url: `there is an api just don't what to show it `,
        data
      }).then(res => {
        console.log(res);
        navigate(-1)
      }).catch(error => {
        if (error.response) {
          setFormErrors(error.response.data);
        }
      })
    }
    return (
        <section>
            <div class="Employewrapper">
                <div style={title} class="title">
                delivery update form
                </div>
                <form class="form" onSubmit={handleSubmit} encType='multipart/form-data'>
                    <Form.Group class="inputfield">
                        <Form.Label style={regForm} for="file">Profile Picture</Form.Label>
                        <div style={{ width: "100%" }}>
                        <img src={`${delivery ? delivery.profile_picture : null}`} alt={`${delivery ? delivery.first_name : null}`} />
                            <Form.Control style={formInput} isInvalid={formErrors ? formErrors.profile_picture : null} defaultValue={delivery ? delivery.profile_picture : null} required type="file" id="file" accept="image/*" class="input" name='profile_picture' />
                            <Form.Control.Feedback type="invalid">
                            {formErrors ? formErrors.profile_picture : null}
                            </Form.Control.Feedback>
                        </div>
                    </Form.Group>
                    <Form.Group class="inputfield">
                        <Form.Label style={regForm}>Birthdate</Form.Label>
                        <div style={{ width: "100%" }}>
                          
                        <Form.Control style={formInput} isInvalid={formErrors ? formErrors.birthdate : null} defaultValue={delivery ? delivery.birthdate : null} required type="date" class="input" name='birthdate' />
                        <Form.Control.Feedback type="invalid">
                        {formErrors ? formErrors.birthdate : null}
                            </Form.Control.Feedback>
                        </div>
                    </Form.Group>
                    <Form.Group class="inputfield">
                        <Form.Label style={regForm} for="file">Id Card</Form.Label>
                        <div style={{ width: "100%" }}>
                        <img src={`${delivery ? delivery.identification_card : null}`} alt={`${delivery ? delivery.first_name : null}`} />
                        <Form.Control style={formInput} isInvalid={formErrors ? formErrors.identification_card : null} required type="file" id="file" accept="image/*" class="input" name='identification_card' />
                        <Form.Control.Feedback type="invalid">
                        {formErrors ? formErrors.identification_card : null}
                            </Form.Control.Feedback>
                        </div>
                    </Form.Group>
                    <div className="inputfield">
                        <button className="btn" style={subBtn}> update </button>
                    </div>
                    <Link to="/admin-page/delivery" className='btn' style={backBtn}>Back to delivery</Link>
                </form>
            </div>
        </section>
    )
}
export default StaffForm;

sorry i know its a lot of code(and not to good bare with me). what i want to accomplish is lets say i added a delivery person or the person registered him self i(the admin) in turn can edit the persons profile picture, birth date and identification card picture. From the code you may have noticed i have already displayed the image and the the birth date but i cant put the image in the input filed as a value. meaning if i want to edited the images i have to reselect my previse image to edit the birth date but if i am able to put the image as a value in the input field i can edited the once i want and leave the other data as it it. how can i set the images as a value (like a default value but be able to change it )?