422 Unprocessable Entity Error after fetch POST request - node.js

Question

I'm receiving a 422 Unprocessable Entity, invalid inputs error when making a fetch POST request. This resulted in an empty object {} in my Request Payload.
I've done the following checks. Please take a look and kindly guide me in the right direction.
• checked post-routes
router.post(
'/',
[
check('location').not().isEmpty(),
check('caption').not().isEmpty()
],
postsControllers.createPost
);
• checked posts-controller, extracting correct attributes from body
const { userId, location, caption } = req.body;
const createdPost = new Post({
userId,
location,
imageUrl: 'abc.jpeg',
caption,
})
• checked if managing userId in front-end auth-context
// auth-context
export const AuthContext = createContext({
isLoggedIn: false,
userId: null,
login: () => {},
logout: () => {}
});
// App.js
const login = useCallback((uid) => {
setIsLoggedIn(true);
setUserId(uid);
}, []);
const logout = useCallback(() => {
setIsLoggedIn(false);
setUserId(null);
}, []);
• checked if user property is mapped to user object in signup and login
// signup action of users-controllers
res.status(201).json({ user: createdUser.toObject({ getters: true })});
// login action of users-controllers
res.json({ message: 'Logged in!', user: existingUser.toObject({ getters: true })});
• checked if url, request, body and headers are included when sending request in new post
// New Post
<Formik
initialValues={‌{ location: '', caption: ''}}
validationSchema={validationSchema}
onSubmit={(values, { setSubmitting }) => {
try {
fetch('http://localhost:5000/api/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
userId: auth.userId,
email: values.email,
password: values.password
})
)
history.push('/');
} catch (err) {}
}}