如何解决功能组件的Reactjs ForwardRef错误

Question

我创建了自己的功能组件，并提出了引用错误。 我已经发送了一组对象来代替符号。什么东西少了？ 如何解决功能组件的此问题？

     const F1ButtonGroup = ({
        buttonClick,
     symbols,
     className,
  ...props
   } ) => {
   const classes = UseStyles();
   const classNames = className ? clsx(classes.f1groupButton, className) : classes.f1groupButton;
    return (
     <ButtonGroup className={classes.f1buttondiv}>
         <Grid container spacing={1} >
             {symbols && symbols.map((item, key) =>
                 (<Grid item xs={3} sm={3} md={3} lg={3} style={{ marginTop: '1%', padding: '0px' }} 
          key={key} ref={key}>
                     <Link to="/recipekit">
                         <Button onClick={buttonClick} className={classNames}>
                             <FontAwesomeIcon icon={item.name} {...props} />
                         </Button>
                     </Link>
                 </Grid>)
             )}
         </Grid>
       </ButtonGroup>
     );
 };

   export default F1ButtonGroup;

我将其导入并按以下方式使用：

     <F1ButtonGroup symbols={symbols} />

     Getting error as : 
     index.js:1 The above error occurred in the <Context.Consumer> component:
    in ForwardRef (created by yn)
    in div (created by ForwardRef)
    in ForwardRef (created by ForwardRef)
    in ForwardRef (created by yn)
    in div (created by ForwardRef)
    in ForwardRef (created by ForwardRef)
    in ForwardRef (created by yn)
    in div (created by t)
    in t (created by yn)
    in yn (at App.js:57)
    in div (at App.js:49)
    in App (at src/index.js:7)

我创建了自己的功能组件，并提出了引用错误。 我已经发送了一组对象来代替符号。什么东西少了？ 如何解决功能组件的此问题？