Как перерендерить изображение, не перезагружая страницу?

У меня есть табличка, в которую подгружаются некоторые данные. В ней есть кнопка, функция которой отправлять файл на сервер, с которого приходит ответ, являющийся id этой фотографии в базе данных. Дальнейший доступ к этой фотографии осуществляется по ссылке, PathVarieble которой является id, пришедший с сервера. Но проблема в том, что фотография не перерендеривается после получения ответа. Что я делаю не так?

Таблица Product.tsx:

  import {ProductItem} from "../models";
import "../styles/table.css"
import "../styles/Image.css"
import axios from "axios";
import React, {useState} from "react";
import {Modal} from "./Modal";
import {SavePhoto} from "./SavePhoto";

interface ProductProps {
    product: ProductItem
    remove: (product: ProductItem) => void
}



export function Product({ product, remove }: ProductProps) {
    const url = 'http://localhost:8088/admin/delete/' + product.id

    const [modal, setModal] = useState(false)
    const [imageId, setImageId] = useState(product.imageId)

    const saveHandler = (id : number) => {
        setImageId(id)
    }
    return (
        <div>
            <table className="table">
            <tbody>
            <tr>
                <th>{product.type}</th>
                <th>{product.name}</th>
                <th><img src={'http://localhost:8088/images/'+imageId} alt="Фотографии нет"/></th>
                <th>{product.description}</th>
                <th>{product.price}</th>
                <th><button onClick={() => setModal(true)}
                    className="py-2 px-4 border bg-green-400"
                >Добавить(Изменить) фотографию</button></th>
                {modal && <Modal title="Добавление фотографии" onClose={() => setModal(false)}>
                    <SavePhoto id={product.id}
                               onClose={() => setModal(false)}
                               onSave={saveHandler}
                    />
                </Modal>}
                <th><button className="py-2 px-4 border bg-blue-300">Редактировать</button></th>
                <th><button className="py-2 px-4 border bg-red-300" onClick={ async event => {
                    event.preventDefault();
                    await axios.post(url)
                    remove(product)
                }}>Удалить</button></th>
            </tr>
            </tbody>
            </table>
        </div>
    )
}

Modal.tsx

    import React from "react";

interface ModalProps {
    children: React.ReactNode
    title : string
    onClose: () => void
}





export function Modal({children, title, onClose} : ModalProps) {
    return (
        <>
            <div onClick={onClose}
                className="fixed bg-black/50 top-0 right-0 left-0 bottom-0"/>
            <div className="w-[500px] p-5 rounded bg-white absolute top-10 left-1/2 -translate-x-1/2">
                <h1 className="text-2xl text-center mb-2">{title}</h1>
                {children}
            </div>
        </>
    )
}

Форма с отправкой фотографии: SavePhoto.tsx

    import React, {FormEvent, useRef} from "react";
import axios from "axios";

interface SavePhotoProps {
    id : number
    onClose: () => void
    onSave: (id : number) => void
}


export function SavePhoto( {id, onClose, onSave} : SavePhotoProps) {
    const url = 'http://localhost:8088/admin/saveImage/'+ id
    const fileRef = useRef<HTMLInputElement>(null)

    const submitForm =  async (event: FormEvent) => {
        event.preventDefault()
        const formData = new FormData()
        if (fileRef.current?.files!= null) {
            formData.append("file", fileRef.current.files[0])
            const response = await axios.post(url, formData)
            onSave(response.data)
        }
        onClose()
    }



    return (
        <form onSubmit={submitForm}>
            <input type="file" ref={fileRef}/>
            <button type="submit" className="py-2 px-4 border bg-yellow-400 hover:text-white">Отправить фото</button>
        </form>
    )
}