I'm not able to access create visual on page object as mentioned in document: https://learn.microsoft.com/en-us/javascript/api/overview/powerbi/create-add-visual

Question

https://learn.microsoft.com/en-us/javascript/api/overview/powerbi/create-add-visual

I'm referring above document and below is my code and error:

My Error:
Error adding visual to report: Error: createVisual method is not available on the page object
Available methods on page object: (10) ['report', 'name', 'displayName', 'isActive', 'visibility', 'defaultSize', 'mobileSize', 'defaultDisplayOption', 'background', 'wallpaper']

My code:

const addVisualToReport = async (report) => {
        try {
            console.log('Adding visual to report...');
            const page = await report.getActivePage();
            console.log('Active page:', page);

            // Log available methods on the page object
            console.log('Available methods on page object:', Object.keys(page));

            const visualType = 'barChart'; // Specify the type of visual you want to add

            const visualLayout = {
                x: 0,
                y: 0,
                width: 300,
                height: 300
            };

            // Check if createVisual method exists
            if (typeof page.createVisual !== 'function') {
                throw new Error('createVisual method is not available on the page object');
            }

            // Create a new visual
            const visual = await page.createVisual(visualType, visualLayout);
            console.log('Visual created:', visual);

            // Sample data for the visual
            const sampleData = props.data;
            console.log('Inside PowerBIDashboard: data: ', sampleData);

            const dataViewMappings = [
                {
                    conditions: [
                        { 'Category': { max: 1 }, 'Values': { max: 1 } }
                    ],
                    categorical: {
                        categories: {
                            for: { in: 'Category' },
                            dataReductionAlgorithm: { top: {} }
                        },
                        values: {
                            select: [{ bind: { to: 'Values' } }]
                        }
                    }
                }
            ];

            const dataView = {
                metadata: {
                    columns: [
                        { displayName: 'Category', queryName: 'Category', type: models.ValueType.fromDescriptor({ text: true }) },
                        { displayName: 'Value', queryName: 'Values', isMeasure: true, type: models.ValueType.fromDescriptor({ numeric: true }) }
                    ]
                },
                categorical: {
                    categories: [{
                        source: { displayName: 'Category', queryName: 'Category', type: models.ValueType.fromDescriptor({ text: true }) },
                        values: sampleData.data.map(d => d.category)
                    }],
                    values: {
                        group: [{
                            values: [{
                                source: { displayName: 'Value', queryName: 'Values', isMeasure: true, type: models.ValueType.fromDescriptor({ numeric: true }) },
                                values: sampleData.data.map(d => d.value)
                            }]
                        }]
                    }
                }
            };

            await visual.update({
                dataViews: [dataView],
                dataViewMappings: dataViewMappings
            });

            console.log('Visual updated with sample data');
        } catch (error) {
            console.error('Error adding visual to report:', error);
        }
    };