Reactjs 样式化组件（按钮）不使用onClick

我有一个样式化的组件是button。我试图在这个导出的组件上使用onClick方法，但是这个事件（onClick）完全死掉了。我不知道问题出在哪里。（此外，我使用帧运动）

从“样式化组件”导入样式化；
从“框架运动”导入{motion}；
const StyledButton=styled（motion.button）`
背景#3939be；
颜色：#fff；
边界：无；
边界半径：19px；
高度：38px；
宽度：适合的内容；
填充：0 16px；
字号：600；
字体大小：0.75rem；
光标：指针；
@媒体屏幕和（最小宽度：640像素）和（最小高度：440像素）{
高度：44px；
边界半径：22px；
}
`;
const PillButton=（{children}）=>{
返回(
{儿童}
);
};
导出默认按钮；

{
setActiveTab（“测试”）；
}}
> 

您需要传递onClick方法

const PillButton = ({ children, onClick }) => {
  return (
    <StyledButton
      whileTap={{ scale: 0.95, transition: { duration: 0.1 } }}
      whileHover={{ scale: 0.95, transition: { duration: 0.1 } }}
      onClick={onClick}
    >
      {children}
    </StyledButton>
  );
};

<PillButton
   onClick={() => {
   setActiveTab('test');
   }}
   > 
</PillButton>

const PillButton=（{children，onClick}）=>{
返回(
{儿童}
);
};
{
setActiveTab（“测试”）；
}}
> 

您需要传递onClick方法

const PillButton = ({ children, onClick }) => {
  return (
    <StyledButton
      whileTap={{ scale: 0.95, transition: { duration: 0.1 } }}
      whileHover={{ scale: 0.95, transition: { duration: 0.1 } }}
      onClick={onClick}
    >
      {children}
    </StyledButton>
  );
};

<PillButton
   onClick={() => {
   setActiveTab('test');
   }}
   > 
</PillButton>

const PillButton=（{children，onClick}）=>{
返回(
{儿童}
);
};
{
setActiveTab（“测试”）；
}}
> 

const PillButton = ({ children, onClick }) => {
  return (
    <StyledButton
      whileTap={{ scale: 0.95, transition: { duration: 0.1 } }}
      whileHover={{ scale: 0.95, transition: { duration: 0.1 } }}
      onClick={onClick}
    >
      {children}
    </StyledButton>
  );
};

<PillButton
   onClick={() => {
   setActiveTab('test');
   }}
   > 
</PillButton>