How to update UI after decreasing qtty from backend in react JS?

Question

When I reload the page then quantity is being updated but until page reload quantity does not update on UI. On the other hand, my database decreasing the quantity.

const StockUpdate = () => {
const { id } = useParams();
const [stockUpdate, setStockUpdate] = useState({});
useEffect(() => {
    const getItemById = async () => {
        const url = `http://localhost:8000/inventory/${id}`
        const { data } = await axios.get(url);
        setStockUpdate(data);
    }
    getItemById();
}, [id]);

const handleDeliveryButton = () => {
    console.log(stockUpdate)
    const item = stockUpdate;
    const url = `http://localhost:8000/inventory/${id}`;
    fetch(url, {
        method: 'PUT',
        headers: {
            'Content-type': 'application/json',
        },
        body: JSON.stringify(item),
    })
        .then(res => res.json())
        .then(data => {
         
            console.log(data)
        });
    toast('Stock quantity updated after delivery !!!!');

};