I have written a Scala + AKKA backend API, on which I can request the server ID at: http://localhost:8080/web/id

I have then written a nextjs react front-end (at the moment, a very basic example). The goal is that the web page should display the value of the ID, requested from the API, on the page. Simple, right?

For some reason however, I get nothing displayed on the page, despite the request being sent and the text response visibly coming back to the page. Any suggestions?

This is the react page:

"use client";

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

const MyPage = () => {
    const [serverID, setServerID] = useState([]);

    useEffect(() => {
        id()
    });

    const id = async () => {
        const response = await fetch("http://localhost:8000/web/id");

        setServerID(await response.json());
    }

    return (
        <div className="App">
            <div>ServerID:{serverID}</div>
        </div>
    );
};

export default MyPage;

The page sending and receiving the response:

And although I know this section is working, the section of the api that handles the request:

and the Layer super class: