Stomp websocket CONNECTED but not receiving messages for SUBSCRIBE or SEND

I am trying to work on a websocket demo with Angular 13 and Spring Boot 2.7

My relevant pom dependencies:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

SocketConfiguration class is as follows:

@Configuration
@EnableWebSocketMessageBroker
public class SocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic");
        registry.setApplicationDestinationPrefixes("/app");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/up-guide-websocket").setAllowedOrigins("http://localhost:4200");
        registry.addEndpoint("/up-guide-websocket").setAllowedOrigins("http://localhost:4200").withSockJS();
    }
    
}

Controller class is as follows:

@Controller
public class MessageController {

    @MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public Greeting greeting(Hello msg) throws InterruptedException {
        Thread.sleep(2000);
        return new Greeting("Hi, " + msg.getName());
    }

}

Hello class has a String name member and Greeting class has a String content member.

My relevant dependencies in package-json:

"@stomp/stompjs": "^6.1.2",
"sockjs-client": "^1.6.1",

Angular ts file is as follows:

export class SocketDemoComponent implements OnInit, OnDestroy {

  stompClient: Stomp.Client;
  @ViewChild('socketResults') result: ElementRef<HTMLParagraphElement>;
  @ViewChild('socketName') input: ElementRef<HTMLInputElement>;

  ngOnInit(): void {
    this.connectSocket();
  }

  connectSocket() {
    // follow this instead: https://stomp-js.github.io/guide/stompjs/using-stompjs-v5.html
    this.stompClient = new Stomp.Client({
      brokerURL: 'ws://localhost:8080/up-guide-websocket',
      debug: (s) => console.log(s)
    });

    this.stompClient.webSocketFactory = () => {
      return new SockJs('http://localhost:8080/up-guide-websocket');
    };

    this.stompClient.onConnect = (frame) => {
      console.log('connected: ', frame);
      this.stompClient.subscribe('http://localhost:8080/topic/greetings', (greeting) => {
          const greetMsg = JSON.parse(greeting.body).content;
          this.result.nativeElement.innerText += ' ' + greetMsg;
      });
    };
    this.stompClient.activate();
  }

  onSocketSubmit() {
    // get value
    const value = this.input.nativeElement.value;

    // send data
    this.stompClient.publish({
        destination: 'http://localhost:8080/app/hello', 
        headers: {'Access-Control-Allow-Origin': '*'}, 
        body: JSON.stringify({'name': value})
    });

    // empty it
    this.input.nativeElement.value = '';
  }

  ngOnDestroy(): void {
    if (this.stompClient != null) {
      this.stompClient.deactivate();
    }
  }
}

The html file is just an input box and a button where clicking the button will call onSocketSubmit().

When I run all this, I see the following in the chrome network tab for my socket:

Received: o
Sent: CONNECT\naccept-version:1.0,1.1,1.2\nheart-beat:10000,10000\n\n\u0000
Received: CONNECTED\nversion:1.2\nheart-beat:0,0\n\n\u0000
Sent: SUBSCRIBE\nid:sub-0\ndestination:http\\c//localhost\\c8080/topic/greetings\n\n\u0000

The Subscribe receives nothing from the server.

If I submit from button, I get the following in network tab:

Sent: SEND\ndestination:http\\c//localhost\\c8080/app/hello\nAccess-Control-Allow-Origin:*\ncontent-length:16\n\n{\"name\":\"Input\"}\u0000

This again receives nothing from the server. After this, I just receive heartbeats at regular intervals.

Can someone help with what may be going wrong?