How to instantly post data using Axios after inserting it - reactjs

Question

I need to refresh my page in order to see any added data I put into my cluster. I have been trying to add a .then() statement after I take in data through the front end in order to post it immediately after the 'Add to List' button is clicked. I've done the same with update and delete (it instantaneously changes on client), but I just need a bit of help with how to do the same with inserting/creating! Thanks!
Here is my some of my front-end code (const addToList and HTML later in the code)...
const addToList = () => {
Axios.post("http://localhost:3001/insert",
{
foodName: foodName,
amount: amount }
)};
<div className="inputarea">
<label id='foodname'>Food Name:</label>
<input type="text" onChange={(event) => {setFoodName(event.target.value)}}/>
<label id='amountneeded'>Amount Needed:</label>
<input type="number" onChange={(event) => {setAmount(event.target.value)}}/>
<button id='addButton' onClick={addToList}><span>Add To List</span></button>
<h1>Food List:</h1>
{foodList.map((val, key) => {
return (
<div className='dataContainer'>
<div className='foodList' key={key}>
<h1 id='groceryList'>
{val.foodName}: {val.amount}
</h1>
<div className='buttonContainer'>
<input type="number" id='numberInput' placeholder = "Update number of items here!" onChange={(event) => {setNewFoodNumber(event.target.value)}}></input>
<button id='change' onClick={() => updateFoodNumber(val._id)}><span>Update!</span></button>
<button id='delete' onClick={() => deleteFood(val._id)}><span>Delete!</span></button>
</div>
</div>
</div>
)
})}
</div>
and my back-end (app.post)!
app.post('/insert', async (req, res) => {
const foodName = req.body.foodName
const amount = req.body.amount
const food = new foodModel({foodName: foodName, amount: amount});
try {
await food.save();
res.send("inserted data!");
} catch(err) {
console.log(err)
}});