javascript - 在组件属性中使用 React.forwardRef 内联是否有效？

Question

代码

const TopLabel = ({ innerRef, ...props }) => {
  console.log(innerRef);
  return <Fragment>Top label</Fragment>;
};

export default function TabsWrappedLabel() {
  return (
    <AppBar position="static">
      <Tabs aria-label="wrapped label tabs example">
        <Tab
          value="one"
          component={React.forwardRef((props, ref) => (
            <TopLabel {...props} innerRef={ref} />
          ))}
        />
      </Tabs>
    </AppBar>
  );
}

这是否会导致每次重新渲染和实例化 React.forwardRef 时出现问题，或者内联使用它是否完全可以？

否则应该如何使用？

演示