Receiving a status of 404 when implementing GET request - MERN Stack - node.js

Question

I'm trying to display a particular group detail page from the group's list. I have managed to display all the group lists from the backend, but when it comes to displaying each group detail page, I'm receiving a status of 404. I don't understand what the issue is, why it can't find that group on that particular id.
On Backend, I made a getGroup controller:
export const getGroup = async (req, res) => {
// Route parameters are named URL segments that are used to capture the values specified at their position in the URL.
// Deconstructing it so that we can use it. It's like unpacking it.
const { id } = req.params
try {
// finding a group by it's Id
const group = await Group.findById(id)
// Send it in response
res.status(200).json(group)
} catch (error) {
// In case it didn't work out
res.status(404).json({ message: error.message })
}
}
Then Routes:
router.get('/:id', getGroup)
Main Route:
app.use('/groups', groupRoutes)
On Front End, I'm using Axios to create an API.
export const fetchGroup = (id) => API.get(`/groups/${id}`)
Using Redux for state management, so here is my action creator for a particular group.
// Will get a particular group
export const getGroup = (id) => async (dispatch) => {
try {
// Over here we are fetching all the data from api and dispatching it.
const { data } = await api.fetchGroup(id)
dispatch({type: FETCH_GROUP, payload: data})
} catch (error) {
console.log(error.message)
}
}
Reducer for fetching a group:
// Reducers take state and an action as arguments and return a new state in result.
const groups = ( state = { groups: [] }, action ) => {
switch (action.type) {
case FETCH_ALL:
return {
...state,
groups: action.payload
}
case FETCH_GROUP:
// set to group because we are getting a single group
return { ...state, group: action.payload }
default:
return state
}
}
export default groups
My GroupPage.js, where I'm dispatching my functions.
const GroupPage = () => {
const { group } = useSelector((state) => state.groups)
const dispatch = useDispatch()
const { id } = useParams()
useEffect(()=> {
dispatch(getGroup(id))
}, [id])
//if(!group) return null
return (
isLoading ? <div style={{width: 50, height: 50 }}>
<CircularProgressbar value={66} text={66} />
</div> : (
<div>
<Container>
<Top>
<div>
<h1>{group.groupName}</h1>
<p>{group.location}</p>
<p>{group.members}</p>
</div>
</Top>
</Container>
</div>
)
)
}
export default GroupPage
From the above code, if I check for a group:
if(!group) return null
Then I'm getting the error
typeError: Cannot read property 'groupName' of undefined
Not sure what the problem is. I have also tried the data fetching with the loading state, but that didn't resolve the issue either.
Please, any help would be appreciated.