angular ag-grid doesn't work with storybook

I want to create a storybook for my ag-grid component. I have tried the usual way that I follow for other angular components. But this doesn't seem to work.

const meta: Meta<AgGridAngular> ={
    title: 'GridCell',
    component: AgGridAngular,
    tags: ['autodocs'],
    decorators: [
        moduleMetadata({
          imports: [AgGridAngular, AgGridModule],
        }),
      ],
    render: (args) => ({
        props: {
            ...args,
        },
        template: `    
        <ag-grid-angular
            [rowHeight]=50
            [headerHeight]=44
            [suppressCellFocus]=true
            ${argsToTemplate(args)}
        >
        </ag-grid-angular>
        `
    }),
};

export default meta;
type Story = StoryObj<AgGridAngular>;
export const grid_cell: Story = {
    args: {
        rowData: [
            { make: "Tesla", model: "Model Y", price: 64950, electric: true },
            { make: "Ford", model: "F-Series", price: 33850, electric: false },
            { make: "Toyota", model: "Corolla", price: 29600, electric: false },
        ],
        columnDefs: [
            { field: "make" },
            { field: "model" },
            { field: "price" },
            { field: "electric" }
        ]
    }
};

This is just renders an empty div. I was not able to find many resources to integrate storybook with ag-grid in angular. What am i missing?

One way to verify the issue would be to inspect the elements in Dev tools. If you are able to see ag grid relate doc elements for headers and cells then this would suggest that the grid is being rendered correctly but it's not been given a height and width.

You might want to try setting the style attribute on the ag-grid-angular component to have height and width of 100%.