Appending to MediaSource after seeking to a nonbuffered position

Question

This is the closest copy of my question: MediaSource appendBuffer at different positions

Essentially, I have a video file stored in S3 that I am able to successfully fetch byteranges of and load into a MediaSource buffer when I fetch sequentially (starting from 0 onwards). However, if I simply fetch a different range that does NOT start from 0 and load it into the buffer, I get no errors but the video does not play (blank video element).

Below, I have a reproducible example:

var videoElement = document.querySelector('video');
var mediaSource = new MediaSource();
var sourceBuffer;

// URL of the video file
var videoUrl = 'some-url';

// Event listener for when the MediaSource is opened
mediaSource.addEventListener('sourceopen', function() {
    sourceBuffer = mediaSource.addSourceBuffer('some-value');
    sourceBuffer.mode = "segments"
    sourceBuffer.addEventListener('updateend', function() {
        console.log("mediaSource.duration: ", mediaSource.duration)
        console.log("sourceBuffer.appendWindowStart: ",sourceBuffer.appendWindowStart)
        console.log("sourceBuffer.appendWindowEnd: ",sourceBuffer.appendWindowEnd)
        console.log("sourceBuffer.timestampOffset: ",sourceBuffer.timestampOffset)
    });
    sourceBuffer.addEventListener('error', function(err) {
        console.log('errored', err) // This fires, but nothing in this error is descriptive to me
    });
    // Fetch the video file with the appropriate byte range
    fetchVideo(videoUrl);
});

// Function to fetch the video data with the specified byte range
function fetchVideo(url) {
    var headers = {
        Range: 'bytes=1353653023-1494852067'
    };

    fetch(url, { headers: headers })
        .then(function(response) {
            return response.arrayBuffer();
        })
        .then(function(buffer) {
            // Append the fetched video data to the source buffer. When the line below is uncommented, playback still does not work.
            // sourceBuffer.timestampOffset += 83.0
            sourceBuffer.appendBuffer(buffer);
        })
        .catch(function(error) {
            console.error('Error fetching video:', error);
        });
}

// Set the MediaSource object as the source of the video element
videoElement.src = URL.createObjectURL(mediaSource);

My question is how can I fetch this byte range that does not start from 0? I also checked to see if this byte range was valid using ffmpeg:

some-user:~$ ffprobe -i video.webm -show_frames \
> -show_entries frame=pkt_pos \
> -read_intervals 01:23%+#1 \
> -of default=noprint_wrappers=1:nokey=1 \
> -hide_banner -loglevel panic
1353653023
some-user:~$ ffprobe -i video.webm -show_frames \
> -show_entries frame=pkt_pos \
> -read_intervals 01:30%+#1 \
> -of default=noprint_wrappers=1:nokey=1 \
> -hide_banner -loglevel panic
1494852067