So I'm trying to validate if the user and password inserted are in the API database for now my code only asks for a username and a password and gives it a token given by the API even if the user does not exist. My problem is how to call the API to validate if the user exists or not. I'm trying to create an if cycle to communicate with the API but I'm not getting anywhere thoughts? This is my code:

import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import"./App.css";
const Login = () => {
  const [username, setUsername] = useState("");
  const [Password, setPassword] = useState("");
  const [error] = useState(null);
  const [loading] = useState(false);
  const navigate = useNavigate();

  const handleLogin = () => {
    console.log("name------->", username);
    console.log("pass------->", Password);


    var axios = require("axios");
    var data = JSON.stringify({
      "password": Password,
      "username": username,
    });

    var config = {
      method: "post",
      url: "https://api.secureme.pt/api/v1/auth/login",
      headers: {
        "Content-Type": "application/json",
      },
      data: data,
    };

    axios(config)
      .then(function (response) {
        console.log("token----->", response.data.token);
        sessionStorage.setItem("token", response.data.token);
        navigate("/home");
      })
      .catch(function (error) {
        console.log(error);
      });
  };

  return (
    <div className="Login">
      <div className="title">
      Login
      </div>
      <br />
      <br />
      <div>
        Username: <br />
        <input
          type="text"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
      </div>
      <div>
        Password: <br />
        <input
          type="password"
          value={Password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </div>
      <br />
      {error && <div className="error">{error}</div>}
      <input className="button"
        type="button"
        value={loading ? "Loading..." : "Login"}
        disabled={loading}
        onClick={handleLogin}
      />
    </div>
  );
};
export default Login;