Как передать дополнительную переменную в React.forwardRef

Question

Я пытаюсь обновить свое приложение до Material UI V4, и мне нужно использовать React.forwardRef при создании компонента для кнопки LinkItem, но у меня есть динамически сгенерированный список и мне нужно передать строку 'to' в качестве переменной / проп.

ListItem генерируется так:

<ListItem 
  key={childData.display} 
  button 
  component={(routerProps) => renderLink(childData.link, routerProps)}
>
  <ListItemText primary={childData.display} />
</ListItem>

С renderLink, переданным в качестве реквизита от родительского компонента:

renderLink = (link, routerProps) => <Link to={link} {...routerProps} />;

Я пробовал:

const renderLink = link = React.forwardRef((props, ref) => <Link to={link} {...props} ref={ref} />)

и:

renderLink = (link, routerProps) => {
  const props = {
    link: link,
    ...routerProps
  };
  return React.forwardRef((props, ref) => <Link to={props.link} {...props} ref={ref} />)
} 

но ни один из них не сработал, и я не знаю, как я могу сделать эту работу.

Соответствующая документация: https://material -ui.com / guides / состав / # caveat-with-refs