SourceBuffer's appendBuffer() not appending arrayBuffer

Question

Context:

1.) Confirmed that the backend is returning a range of bytes using StreamingResponseBody (I'm using spring boot) via 206 response code

2.) Confirmed that the received data makes sense, I think, by comparing the logs displayed here chrome://media-internals/ with the logs displayed when I play any YouTube video. I attached some pictures to show this.

3.) On the frontend, byte stream gets converted into an arrayBuffer via response.arrayBuffer()

4.) Confirmed that the video's codec profile is video/mp4; codecs="avc1.64002a,mp4a.40.2"; profiles="mp42,mp41" . Used mp4box (https://github.com/gpac/mp4box.js) to get the codec and profile and confirmed that the browser supports this MediaSource.isTypeSupported('video/mp4; codecs="avc1.64002a"; profiles="mp42,mp41"'); I'm using google chrome to test this.

Issue:

1.) It looks like buffered isn't getting updated, because it's TimeRange length is not changing and that sourceBuffer.buffered.end(0) and sourceBuffer.buffered.start(0) remains undefined

2.) And because of the previous issue, <video /> doesn't play.

Using a callback getVideoStreamResourceAPI to receive the arrayBuffer, the following is my code

getVideoStreamResourceAPI(pathVariables, identityPayload, resp => {
                    const mediaSource = new MediaSource();
                    videoRef.current.src = URL.createObjectURL(mediaSource);
                    mediaSource.addEventListener('sourceopen', sourceOpen, {once: true});
    
                    function sourceOpen() {
                        URL.revokeObjectURL(videoRef.current.src);
                        var sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.64002a,mp4a.40.2"; profiles="mp42,mp41"');

                        sourceBuffer.addEventListener('update', sourceBufferUpdate, { once: true });
                        sourceBuffer.appendBuffer(resp);
                        sourceBuffer.addEventListener('updateend', updateEnd, { once: true });
                    }
    
                    function sourceBufferUpdate(e) {
                        console.log("updated: ", e);
                    }
    
                    function updateEnd(e) {
                        console.log("updatedEnded: ", e);
                        console.log("buffered: ", videoRef.current.buffered);
                        videoRef.current.addEventListener('playing', fetchNextSegment, { once: true });
                    }

                    function fetchNextSegment() {
                        console.log("fetching next segment");
                    }
    
                    setSpinner(null);
                });

NOTE: resp contains the arrayBuffer and fetchNextSegment() isn't getting called.

Any suggestions, ideas, and help would be greatly appreciated. Thanks for taking the time to read this.