How do i use the fetch() to get the user list from https?

I don't quite seem to understand why I am getting an error here.

I am trying to create a react&spring two users chat application with a login form.

I completed the login page but I am not quite sure how to get the two users from the

HTTP 'http://localhost:8080/api/user'

[{"id":2,"username":"jack","password":"1234"},{"id":3,"username":"john","password":"1234"}]

and then use Post to send a message and then use Get to receive a message. Any help would be a true blessing, thank you for reading this and I am sorry if I bothered you in any way, shape or form.

Any type of help is useful even a comment saying that my code is wrong.

App.js

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  // React States
  const [errorMessages, setErrorMessages] = useState({});
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [users, setUsers] = useState();

  

  

  const errors = {
    uname: "invalid username",
    pass: "invalid password"
  };

  const handleSubmit = (event) => {
    //Prevent page reload
    event.preventDefault();

    var { uname, pass } = document.forms[0];

    // Find user login info
    const userData = 
    fetch(`http://localhost:8080/api/user/login?username=${uname}&password=${pass}`, {
      method: 'POST'
      // headers: {
      //   'Accept': 'application/json',
      //   'Content-Type': 'application/json'
      // },
      // body: JSON.stringify({
      //   parameterOne: 'something',
      //   parameterTwo: 'somethingElse'//
      // })
    });

    // Compare user info
    if (userData) {
      setIsSubmitted(true);
    }else{
      renderErrorMessage("login failed");

    }
  };

  // Generate JSX code for error message
  const renderErrorMessage = (name) =>
    name === errorMessages.name && (
      <div className="error">{errorMessages.message}</div>
    );

  

  // JSX code for login form
  const renderForm = (
    <div className="form">
      <form onSubmit={handleSubmit}>
        <div className="input-container">
          <label>Username </label>
          <input type="text" name="uname" required />
          {renderErrorMessage("uname")}
        </div>
        <div className="input-container">
          <label>Password </label>
          <input type="password" name="pass" required />
          {renderErrorMessage("pass")}
        </div>
        <div className="button-container">
          <input type="submit" />
        </div>
      </form>
    </div>
  );

  const message = 
    <div >
      <textarea >
        
      </textarea>
    </div>

  

  const renderRoster = (
    { var roster=fetch('http://localhost:8080/api/user', {
      method: 'GET'});
      
    }
  )

  

  return (
    <div className="app">
      <div className="login-form">
      
        
        
        {isSubmitted ? renderChat  : renderForm}
        
          
      </div>
    </div>
  );
}

export default App;

styles.css

.app {
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  height: 100vh;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  background-color: #f8f9fd;
}

input[type="text"],
input[type="password"] {
  height: 25px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

input[type="submit"] {
  margin-top: 10px;
  cursor: pointer;
  font-size: 15px;
  background: #01d28e;
  border: 1px solid #01d28e;
  color: #fff;
  padding: 10px 20px;
}

input[type="submit"]:hover {
  background: #6cf0c2;
}

.button-container {
  display: flex;
  justify-content: center;
}

.login-form {
  background-color: white;
  padding: 2rem;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.list-container {
  display: flex;
}

.error {
  color: red;
  font-size: 12px;
}

.title {
  font-size: 25px;
  margin-bottom: 20px;
}

.input-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px;
}