Javascript 故事书操作未记录到“操作”选项卡

我正在尝试创建一个操作，该操作将在“操作”选项卡中打印单击的产品的id

控制台正在工作，但操作未发生

我做错了什么

import { action } from '@storybook/addon-actions';
import React, { useState } from 'react';
import { Meta } from '@storybook/react/types-6-0';
import { ProductContainer } from './ProductContainer'

export default {
    title: 'Product',
    decorators: [withKnobs],
    component: ProductContainer,
} as Meta;

export const ProductContainer = () => {
const [selectedProductId, setSelectedProductId] = useState<string|null>(null)
const handleSelectedProductId = (productId) => {
        console.log('product id', productId, 'was clicked');
        action(
            `Product ${productId} ${
                productId !== selectedProductId ? 'was selected' : 'is not selected'
            }`
        );
        setSelectedProductId(productId !== selectedProductId ? productId : null);

        return (
            <ProductContainer onClick={(productId) => handleSelectedProductId(productId)}/> 
        )  
    }
}

从'@storybook/addon actions'导入{action}；
从“React”导入React，{useState}；
从'@storybook/react/types-6-0'导入{Meta}；
从“./ProductContainer”导入{ProductContainer}
导出默认值{
标题：“产品”，
装饰师：[带旋钮]，
组件：ProductContainer，
}作为元；
导出常量ProductContainer=（）=>{
常量[selectedProductId，setSelectedProductId]=useState（null）
const handleSelectedProductId=（productId）=>{
log（'productId'，productId'，被点击'）；
行动(
`产品${productId}${
productId！==selectedProductId？已选择？：“未选择”
}`
);
setSelectedProductId（productId！==selectedProductId？productId:null）；
返回(
handleSelectedProductId（productId）}/>
)  
}
}