Read file placed in external storage from js in MAUI Blazor

Question

What I have did so far, write a function to get the path of file

[JSInvokable]
public async static Task<string> GetPath()
{
    return FileSystem.AppDataDirectory+ "/contents/interactive_video";
}

in my js file called this

async function play() {
try {
    const { H5P } = H5PStandalone || {};

    DotNet.invokeMethodAsync('BlazorApp', 'GetPath')
        .then(async path => {
            console.log(path);
            await new H5P(document.getElementById('h5p-container'), { h5pJsonPath: path, frameJs: 'h5p/assets/frame.bundle.js', frameCss: 'h5p/assets/styles/h5p.css' })
                .then(function () {
                    // this is where you will listen for the xAPI event
                    H5P.externalDispatcher.on('xAPI', (event) => {
                        // add your logic to send the event to the LRS  here.             
                        console.log('xAPI event: ', event); //(I am just logging to browser developer console for demo purpose)
                    });
                });
        });
} catch (e) {
    console.log('error : ', e);
}

}

now, when I run the application it throws 404 error on this address

https://0.0.0.0/data/user/0/com.companyname.blazorapp/files/contents/interactive_video/h5p.json