Front-End doesn't recognize message Errors

Question

I'm just trying to handle possible errors.

BackEnd errors:

router.post(
  "/post",
  (req, res: Response, next: NextFunction) => {
    console.log("Bateu");
    return imageUpload(req, res, (err) => {
      if (err instanceof multer.MulterError) {
        if (err.code == "LIMIT_UNEXPECTED_FILE") {
          res.status(500).json({
            message:
              "Só são aceitos imagens nos formatos: jpg, jpeg, png e gif!", //these guys work just fine on Insomnia...
          });
        } else if (err.code == "LIMIT_FILE_SIZE") {
          res.status(500).json({
            message: "Arquivo grande demais, o tamanho máximo é de 2mb", //these guys work just fine on Insomnia...
          });
        }
        res.send();
      } else {
        next();
      }
    });
  },
  postController.post
);

But at the front It just returns 500 error... I've tried error.toJSON(), JSON.stringfy(error), JSON.parse(error)... Don't know what to do basically...

Front-End function:

const postData = async () => {
    let response = await api
      .post("/post", formData, {
        "Content-Type": "multipart/form-data",
      })
      .then(async () => {
        const responseData = await response.data;
        responseApi(responseData);
        toast.success("Upload realizado com sucesso!");
        navigate("/uploaded");
        console.log("Bateu 1");
      })
      .catch((err) => {
        console.log(err.toJSON());
        console.log(JSON.stringify(err))
        console.log(JSON.parse(err));
        console.log(err.data.message)
      });
  };

Console.log: