text: import React from 'react';
  import PropTypes from 'prop-types';
  import { Link as RouterLink } from "react-router-dom";
  
  import ListItem from '@material-ui/core/ListItem';
  import ListItemIcon from '@material-ui/core/ListItemIcon';
  import ListItemText from '@material-ui/core/ListItemText';
    
  export function ListItemLink(props) {
      const { icon, primary, to } = props;
    
      const renderLink = React.useMemo(
        () =>
          React.forwardRef((itemProps, ref) => (
            <RouterLink to={to} {...itemProps} innerRef={ref} />
          )),
        [to],
      );
    
      return (
        <li>
          <ListItem button component={renderLink}>
            {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
            <ListItemText primary={primary} />
          </ListItem>
        </li>
      );
  }
    
  ListItemLink.propTypes = {
      icon: PropTypes.element,
      primary: PropTypes.string.isRequired,
      to: PropTypes.string.isRequired,
  };
  