I’m a beginner and have been trying to learn web development by creating a basic full stack banking web application with spring boot for backend and react for the frontend. Its been going decently, however im stuck at this part where upon logging in with an authenticated user, it is supposed to direct you to a page with the header “Accounts List” and a bulleted list of the user’s accounts. When I log in, it brings me to this page, except all it displays is the header, without the list of accounts. I don’t get any error messages upon logging in, and I’ve also tested the GET request endpoint for fetching the list of a user’s accounts in postman, and it works fine on there. Does anyone have any advice for what might be causing this? Here is my .js file for the Account List Page:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const AccountListPage = ({ username }) => {
    const [accounts, setAccounts] = useState([]);
    const [error, setError] = useState(null);

    const fetchAccounts = async (username) => {
        try {
            const response = await axios.get(`http://localhost:8080/api/accounts?username=${username}`);
            setAccounts(response.data); // Assuming response.data is an array of accounts
        } catch (error) {
            console.error('Error fetching accounts', error);
            setError('error fetching accounts');
        }
    };

    useEffect(() => {
        if (username) {
            fetchAccounts(username);
        }
    }, [username]);

    return (
        <div>
            <h2>Account List</h2>
            {error && <p>{error}</p>}
            <ul>
                {accounts.map(account => (
                    <li key={account.id}>
                        {account.accountType} - {account.balance}
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default AccountListPage;

And here is my Account Controller class in my spring boot application:

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import com.example.banking3.User.CustomUserDetailsService;

@Controller
@RequestMapping("/api/accounts")
public class AccountController {
    
    @Autowired
    private AccountService accountService;

    @Autowired
    private CustomUserDetailsService customUserDetailsService;

    @GetMapping
    public ResponseEntity<?> getAccounts(@RequestParam String username) {
        try {
            List<Account> accounts = accountService.findAccountsByUsername(username);
            return ResponseEntity.ok(accounts);
        } catch (Exception e) {
            return ResponseEntity.status(500).body("Error retrieving accounts");
        }
    }

    @PostMapping("/{userId}")
    @ResponseBody
    public ResponseEntity<Account> addAccountToUser(
        @PathVariable Long userId,
        @RequestBody Account account){
        Account savedAccount = accountService.addAccountToUser(userId, account);
        return ResponseEntity.ok(savedAccount);
    }

    @PutMapping("/{accountId}/deposit")
    @ResponseBody
    public ResponseEntity<Account> deposit(
        @PathVariable Long accountId,
        @RequestBody Double amount){
        Account updatedAccount = accountService.deposit(accountId, amount);
        return ResponseEntity.ok(updatedAccount);
    }

    @PutMapping("/{accountId}/withdraw")
    @ResponseBody
    public ResponseEntity<Account> withdraw(
        @PathVariable Long accountId,
        @RequestBody Double amount) {
        Account updatedAccount = accountService.withdraw(accountId, amount);
        return ResponseEntity.ok(updatedAccount);
    }
}

Have tried youtube, online forums, and chatgpt.