hls.js hls.subtitleTracks returns empty array

Here is my m3u8 master file:

#EXTM3U
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="English",URI="subtitle.m3u8",LANGUAGE="en"
#EXT-X-STREAM-INF:BANDWIDTH=500000,RESOLUTION=1920x1080,SUBTITLES="subs"
index.m3u8

The video loads correctly using hlsjs. Here is my javascript:

var video = document.getElementById('video');
var videoSrc = './video/master.m3u8';
if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource(videoSrc);
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, function(event, data) {
        console.log(hls.subtitleTracks);
        video.play();
    });  
}     

But console.log returns an empty array. What am I doing wrong?