Embedding Quicksight Visual with parameters

We have a QuickSight dashboard in which we have a filter on a particular visual. We are trying to embed the visual in our application. I am able to generate the embed URL for the visual using the documentation. However, the parameters being passed are being reset to default which can be inferred from the following event which I see triggered once the content is loaded.

{
  "eventTarget": {
    "experienceType": "VISUAL",
    "discriminator": 0,
    "contextId": "123",
    "dashboardId": "xyz",
    "sheetId": "abc",
    "visualId": "pqr"
  },
  "eventName": "PARAMETERS_CHANGED",
  "message": {
    "changedParameters": [
      {
        "Name": "Lane",
        "Values": [
          "All"
        ]
      }
    ]
  },
  "timestamp": 1681736836332,
  "eventId": "7965be29-c80e-4ab0-97cc-00a81ba5d664"
}

What we are trying to embed is the tabular visual from the following dashboard:

We have a QuickSight dashboard in which we have a filter on a particular visual. We are trying to embed the visual in our application. I am able to generate the embed URL for the visual using the documentation. However, the parameters being passed are being reset to default which can be inferred from the following event which I see triggered once the content is loaded.

{"eventTarget":{"experienceType":"VISUAL","discriminator":0,"contextId":"123","dashboardId":"xyz","sheetId":"abc","visualId":"pqr"},"eventName":"PARAMETERS_CHANGED","message":{"changedParameters":[{"Name":"Lane","Values":["All"]}]},"timestamp":1681736836332,"eventId":"7965be29-c80e-4ab0-97cc-00a81ba5d664"} What we are trying to embed is the tabular visual from the following dashboard:

Following are the parameters we are passing while loading the visual into application web page using amazon-quicksight-embedding-sdk

FrameOptions:
{
  "url": "EMBED_URL",
  "container": "CONTAINER_ID",
  "height": "100px",
  "width": "100%",
  "onChange": "",
  "resizeHeightOnSizeChangedEvent": false
}
`Content Options:
{
  "toolbarOptions": {
    "export": false,
    "undoRedo": false,
    "reset": false
  },
  "sheetOptions": {
    "initialSheetId": "SHEET_ID",
    "singleSheet": true,
    "emitSizeChangedEventOnSheetChange": false,
    "sheetId": "SHEET_ID"
  },
  "attributionOptions": {
    "overlayContent": false
  },
  "parameters": [
    {
      "Name": "Lane",
      "Values": [
        "MENASHA,WI - HANOVER,MD"
      ]
    }
  ]
}

The frame loads appropriately, however the parameter does not seem to be applied as am expecting to see a single row. The same filtering works, with same parameters, when I embed the dashboard instead of a visual. Just wanted to understand if there is something am missing. Tried scavenging the documentation but unfortunately couldn't deduce much. Any pointers / directions would be much appreciated

Following is the code where we embed the parameters using the amazon-quicksight-embedding-sdk

embedVisual = async(props, quickSightUrl) => {
        const embeddingContext = await createEmbeddingContext({
            onChange: (changeEvent, metadata) => {
                console.log('Context received a change', changeEvent, metadata);
            },
        });
        const dashboardProps = props.dashboardOptions;
        if(dashboardProps){
            const frameOptions = this.getFrameOptions(dashboardProps, quickSightUrl);
            const contentOptions = this.getContentOptions(dashboardProps);
            console.log([frameOptions, contentOptions]);
            let embeddedDashboardOrVisual = null;
            embeddedDashboardOrVisual = await embeddingContext.embedVisual(frameOptions, contentOptions);
            this.setState({embeddedDashboardOrVisual: embeddedDashboardOrVisual});
        }
    }

    getFrameOptions = (props, dashboardUrl) => {
        console.log(document.getElementById(props.dashboardId + this.props.id));
        const frameProps = props && props.frameOptions;
        let options = {
            url: dashboardUrl ? dashboardUrl : props.dashboardUrl,
            container: document.getElementById(props.dashboardId + this.props.id),
            height: frameProps && frameProps.height ? frameProps.height : "700px",
            width: frameProps && frameProps.width ? frameProps.width : "1000px",
            onChange: (changeEvent, metadata) => this.onDashboardChange(changeEvent, metadata)
        }
        return options;
    }

    getContentOptions = (props) => {
        let options = {
            toolbarOptions: this.getToolbarOptions(props.toolbarOptions),
            sheetOptions: this.getSheetOptions(props.sheetOptions),
            attributionOptions: this.getAttributionOptions(props.attributionOptions),
            onMessage: async (messageEvent, experienceMetadata) => this.onMessage(messageEvent, experienceMetadata)
        }
        if(props.parameters && props.parameters.length > 0){
            options.parameters = props.parameters;
        }
        return options;
    }

    getToolbarOptions = (props) => {
        let options = {
            export: props && props.export ? props.export : false,
            undoRedo: props && props.undoRedo ? props.undoRedo : false, // use this option to show or hide the undo and redo buttons
            reset: props && props.reset ? props.reset : false, // use this option to show or hide the  reset button
        }
        return this.appendOptions(props, options);
    }

    getSheetOptions = (props) => {
        let options = {
            initialSheetId: props && props.sheetId ? props.sheetId : null,
            singleSheet: props && props.singleSheet ? props.singleSheet : false, // use this option to enable or disable sheet tab controls
            emitSizeChangedEventOnSheetChange: false, // use this option in combination with resizeHeightOnSizeChangedEvent property, to allow iframe height to resize dynamically, based on sheet height, on changing sheets.
        }
        return this.appendOptions(props, options);
    }

    getAttributionOptions = (props) => {
        let options = {
            overlayContent: props && props.overlayContent ? props.overlayContent : false,
        }
        return this.appendOptions(props, options);
    }

Following are the props parameters being passed to the **embedVisual** method.
dashboardOptions = {{
                     dashboardId: hard_coded_dashboardId,
                     visualId: hard_coded_visualId,
                     sheetId: hard_coded_sheetId,
                     frameOptions: {
                         height: '100px',
                         width: '100%',
                         resizeHeightOnSizeChangedEvent: false
                     },
                     toolbarOptions: {
                         export: false,
                         undoRedo: false,
                         reset: false
                     },
                     sheetOptions: {
                         sheetId: hard_coded_sheetId,
                         singleSheet: true
                     },
                     parameters: [{
                         Name: 'Lane',
                         Values: [lane && lane.toUpperCase()]
                     }]
                 }}