estou iniciando minha caminhada em Reactjs, e estou passando por um problema a alguns dias, que é fazer uma autenticação de login em um api externa na minha aplicação, para dar acesso ao usuário ao restante da aplicação.

Tentei fazer isso utilizando Axios e passando as informações por JSON, porem não deu certo, pois a API só aceita que os dados cheguem em XML, e por mais que eu pesquise na internet, não consigo montar a estrutura para transformar esse JSON em um XML, ou fazer a requisição em XML mesmo.

Segue meu código:

    import api from "../../services/api";
    import { login } from "../../services/auth";
    
    class SignIn extends Component {
        
        state = {
            email: "",
            password: "",
            error: ""
        };
        
        handleSignIn = async e => {
            e.preventDefault();
            const { email, password } = this.state;
            if (!email || !password) {
            this.setState({ error: "Preencha e-mail e senha para continuar!" });
            } else {
            try {
                const response = await api.post("login", { email, password });
                login(response.data.token);
                this.props.history.push("/menu");
            } catch (err) {
                this.setState({
                error:
                    "Houve um problema com o login, verifique suas credenciais. T.T"
                });
            }
            }
        };

E os dados chegam assim:
[![Request Payload][1]][1]


[![Preview][2]][2]


  [1]: https://i.sstatic.net/MSKlJ.png
  [2]: https://i.sstatic.net/18SnV.png

E esse é meu arquivo WebPack:

    {
      "name": "frontend3",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "directories": {
        "test": "test"
      },
      "scripts": {
        "build": "webpack --config webpack.prod.js",
        "start": "webpack-dev-server --config webpack.dev.js",
        "test": "jest ./test"
      },
      "jest": {
        "setupTestFrameworkScriptFile": "./test/enzyme.setup.js"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "@babel/cli": "^7.2.3",
        "@babel/core": "^7.3.4",
        "@babel/plugin-proposal-class-properties": "^7.3.4",
        "@babel/preset-env": "^7.3.4",
        "@babel/preset-react": "^7.0.0",
        "babel-core": "^7.0.0-bridge.0",
        "babel-jest": "^23.6.0",
        "babel-loader": "^8.0.5",
        "babel-polyfill": "^6.26.0",
        "clean-webpack-plugin": "^1.0.0",
        "cors": "^2.8.5",
        "css-loader": "^2.0.0",
        "enzyme": "^3.6.0",
        "enzyme-adapter-react-16": "^1.5.0",
        "html-webpack-plugin": "^3.2.0",
        "jest": "^23.6.0",
        "node-sass": "^4.9.3",
        "react-router-dom": "^4.3.1",
        "react-test-renderer": "^16.8.4",
        "sass-loader": "^7.1.0",
        "style-loader": "^0.23.0",
        "webpack": "^4.27.1",
        "webpack-cli": "^3.1.2",
        "webpack-dev-server": "^3.1.8",
        "webpack-merge": "^4.1.4"
      },
      "dependencies": {
        "axios": "^0.18.0",
        "react": "^16.8.4",
        "react-dom": "^16.8.4"
      }
    }

Se alguém poder me ajudar ficarei super grato, estou estudando todos os dias para ficar bom no que faço, porem não tive JS antes de começar React, e isto tem me afetado em questões simples como esta.

Desde já gratidão por quem tiver tempo para ajudar.