Javascript 在滚动条上添加材质UI按钮

我正在使用React和MaterialUI构建一个chrome扩展。此扩展旨在每次用户滚动时向div类附加一个按钮（div类仅在用户滚动时显示）。然而，我不断得到一个

未捕获错误：Minified React Error#321
滚动窗口代码：

    $(window).on("load", function() {
  // var button = RecipeReviewCard();
  // console.log('i am the button', button);
  function injectButton() {
   var className = ".product-tile__badges";

   $(className).append(RecipeReviewCard());

   $('.dropdown1').mouseenter(function () {
     var dropDownMenu = $(this).children().eq(1);
     dropDownMenu.css('display', 'block');
   });

   // add event listener to hide dropdown on mouse leave
   $('.dropdown1').mouseleave(function () {
     var dropDownMenu = $(this).children().eq(1);
     dropDownMenu.css('display', 'none');
        });
 }
  console.log(RecipeReviewCard());
  // $(window).scroll(injectButton);
   });

物料界面钩子代码：

const useStyles = makeStyles((theme) => ({
  root: {
    maxWidth: 345,
  },
  media: {
    height: 0,
    paddingTop: '56.25%', // 16:9
  },
  expand: {
    transform: 'rotate(0deg)',
    marginLeft: 'auto',
    transition: theme.transitions.create('transform', {
      duration: theme.transitions.duration.shortest,
    }),
  },
  expandOpen: {
    transform: 'rotate(180deg)',
  },
  avatar: {
    backgroundColor: red[500],
  },
}));

export default function RecipeReviewCard() {
  const classes = useStyles();
  const [expanded, setExpanded] = React.useState(false); // First thing is the value and the second sets the value

  const handleExpandClick = () => {
    setExpanded(!expanded);
  };

  return (
    <Card className={classes.root}>
      <CardHeader
        avatar={
          <Avatar aria-label="recipe" className={classes.avatar}>
            R
          </Avatar>
        }
        action={
          <IconButton aria-label="settings">
            <MoreVertIcon />
          </IconButton>
        }
        title="Shrimp and Chorizo Paella"
        subheader="September 14, 2016"
      />
      <CardMedia
        className={classes.media}
        image="/static/images/cards/paella.jpg"
        title="Paella dish"
      />
      <CardContent>
        <Typography variant="body2" color="textSecondary" component="p">
          This impressive paella is a perfect party dish and a fun meal to cook together with your
          guests. Add 1 cup of frozen peas along with the mussels, if you like.
        </Typography>
      </CardContent>
      <CardActions disableSpacing>
        <IconButton aria-label="add to favorites">
          <FavoriteIcon />
        </IconButton>
        <IconButton aria-label="share">
          <ShareIcon />
        </IconButton>
        <IconButton
          className={clsx(classes.expand, {
            [classes.expandOpen]: expanded,
          })}
          onClick={handleExpandClick}
          aria-expanded={expanded}
          aria-label="show more"
        >
          <ExpandMoreIcon />
        </IconButton>
      </CardActions>
      <Collapse in={expanded} timeout="auto" unmountOnExit>
        <CardContent>
          <Typography paragraph>Method:</Typography>
          <Typography paragraph>
            Heat 1/2 cup of the broth in a pot until simmering, add saffron and set aside for 10
            minutes.
          </Typography>
          <Typography paragraph>
            Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over medium-high
            heat. Add chicken, shrimp and chorizo, and cook, stirring occasionally until lightly
            browned, 6 to 8 minutes. Transfer shrimp to a large plate and set aside, leaving chicken
            and chorizo in the pan. Add pimentón, bay leaves, garlic, tomatoes, onion, salt and
            pepper, and cook, stirring often until thickened and fragrant, about 10 minutes. Add
            saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil.
          </Typography>
          <Typography paragraph>
            Add rice and stir very gently to distribute. Top with artichokes and peppers, and cook
            without stirring, until most of the liquid is absorbed, 15 to 18 minutes. Reduce heat to
            medium-low, add reserved shrimp and mussels, tucking them down into the rice, and cook
            again without stirring, until mussels have opened and rice is just tender, 5 to 7
            minutes more. (Discard any mussels that don’t open.)
          </Typography>
          <Typography>
            Set aside off of the heat to let rest for 10 minutes, and then serve.
          </Typography>
        </CardContent>
      </Collapse>
    </Card>
  );
}

const useStyles=makeStyles（（主题）=>({
根目录：{
最大宽度：345，
},
媒体：{
高度:0,，
paddingTop:'56.25%'，//16:9
},
扩展：{
变换：“旋转（0度）”，
marginLeft:'自动'，
转换：theme.transitions.create（'transform'{
持续时间：theme.transitions.duration.shortest，
}),
},
expandOpen：{
变换：“旋转（180度）”，
},
化身：{
背景颜色：红色[500]，
},
}));
导出默认函数RecipeReviewCard（）{
const classes=useStyles（）；
const[expanded，setExpanded]=React.useState（false）；//第一件事是值，第二件事设置值
常量handleExpandClick=（）=>{
setExpanded（！expanded）；
};
返回(
这道令人印象深刻的海鲜饭是一道完美的聚会菜肴，也是一顿与您的家人一起烹调的有趣的晚餐
客人。如果你喜欢的话，加一杯冻豌豆和贻贝。
方法：
在锅中加热1/2杯肉汤，直到慢炖，加入藏红花，放置10分钟
分钟。
在一个（14-16英寸）的肉菜饭平底锅或一个大的深平底锅中，将油加热到中高
烧热。加入鸡肉、虾和意大利香肠，煮熟，不时搅拌，直到轻轻搅拌
棕色，6到8分钟。将虾转移到一个大盘中，放在一边，留下鸡肉
在平底锅中加入辣椒酱、月桂叶、大蒜、西红柿、洋葱、盐和面粉
胡椒粉，煮熟，经常搅拌，直到变稠变香，大约10分钟。加入
藏红花肉汤和剩余的4 1/2杯鸡汤；煮沸。
加入米饭，轻轻搅拌均匀。在上面放上洋蓟和辣椒，然后烹饪
在不搅拌的情况下，直到大部分液体被吸收，15到18分钟
中低，加入保留的虾和贻贝，将它们塞进米饭中，然后烹调
再次不搅拌，直到贻贝打开，大米刚刚变软，5到7分钟
再过几分钟。（丢弃所有未打开的贻贝。）
把火放在一边休息10分钟，然后上桌。
);
}
为什么要使用ReactJS+JQuery而不仅仅是ReactJS？没有具体原因。我是JS新手，熟悉jQuery函数。