Is it valid to use React.forwardRef inline inside a component property?

Code

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>
  );
}

Will this cause issues on re-rendering and instantiating React.forwardRef every-time or is it perfectly ok to use it inline?

How should it be used otherwise?

Demo