useMutation POST request returning `(400) Bad Request`

exports.createBlogPost = async (req, res) => {
  const { title, subtitle, body, displayImage, tags} = req.body

  try {
    const result = await cloudinary.uploader.upload(req.file.path);
    const newPost = await BlogPost.create({
      title,
      subtitle,
      body,
      displayImage: {
        url: result.secure_url,
        public_id: result.public_id,
      },
      tags
    });
    res.status(201).json({
      status: "success",
      data: {
        post: newPost,
      },
    });
  } catch (error) {
    res.status(400).json({
      status: "fail",
      message: error,
    });
  }
};

// axios query
const postBlog = async data => {
  const res = await axios.post('http://127.0.0.1:4000/api/blogposts', data)
  return res.data
}
const NoteViewer = () => {
  const [editorState, setEditorState] = useState()

  // states for each input in the form
  const [title, setTitle] = useState('')
  const [subtitle, setSubtitle] = useState('')
  const [displayImage, setDisplayImage] = useState('')
  const [tags, setTags] = useState([])

  const handleImage = e => {
    const file = e.target.files[0]
    setFileToBase(file)
    console.log(displayImage)
  }

  const setFileToBase = file => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => {
      setDisplayImage(reader.result)
    }
  }
  const { mutate, isLoading } = useMutation(postBlog)
  const handleMutation = e => {
    e.preventDefault()
    const bpost = {
      title,
      subtitle,
      body: editorState,
      displayImage,
      tags
    }
    mutate(bpost)
  }