Heroku not running like it should after trying to post data i get a json object loading instead of a page - reactjs

Question

I'm having problems with heroku. After i try to post data (post a listing), instead of being redirected to listings page where you would find a listing I just posted (that's how it works when i run it locally), the page displays a json object. And refresh doesn't work, i need to type the address again and then everything works normally, and the listing that i just posted is there as it should.
This is the front end
import { useState } from 'react'
import axios from 'axios'
import { useNavigate } from 'react-router-dom'
const PostListings = () => {
let navigate = useNavigate()
const [ newList, setNewListing ] = useState({
city: '',
neighborhood: '',
bedrooms: '',
price: '',
img: '',
reviews_id: []
})
const getNewListing = async () => {
console.log(newList)
await axios({
url: `${window.location.origin}/listings`,
method: 'post',
data: newList
})
}
const handleChange = (e) => {
setNewListing({...newList, [e.target.name]: e.target.value })
console.log(e.target.name)
console.log(e.target.value)
console.log(newList)
}
const handleSubmit= () => {
getNewListing()
navigate('/listings')
window.location.reload(false)
}
return (
<div>
<h2>Add A New Listing</h2>
<form className="submit-form" onSubmit={handleSubmit}>
<input type="text" value={newList.city} onChange={handleChange} name={'city'} placeholder={'city'} />
<input type="text" value={newList.neighborhood} onChange={handleChange} name={'neighborhood'} placeholder={'neighborhood'} />
<input type="text" value={newList.img} onChange={ handleChange} name={'img'} placeholder={'image'} />
<input type="text" value={newList.price} onChange={ handleChange} name={'price'} placeholder={'price'} />
<input type="text" value={newList.bedrooms} onChange={ handleChange} name={'bedrooms'} placeholder={'bedrooms'} />
<button>Submit</button>
</form>
</div>
)
}
export default PostListings
//this is in Controllers
const postListing = async (req, res) => {
try {
console.log('data:', req.body)
const listing = await new Listing(req.body)
console.log('new:', listing)
await listing.save()
return res.status(201).json({ listing })
} catch (error) {
return res.status(500).json({ error: error.message })
}
}
//and in index.js
app.post('/listings', listingsController.postListing)