Material UI - The `component` prop provided to ButtonBase is invalid. Please make sure the children prop is rendered in this custom component

Question

Apologies for the basic question in advance, I'm not a strong frontend developer, and I have scoured the internet. I keep getting this error when I inspect my frontend app in chrome.

(3) Material-UI: The component prop provided to ButtonBase is invalid. Please make sure the children prop is rendered in this custom component.

Why are the social button tabs throwing this error?

Here is the code...

import React, {forwardRef} from 'react';
import '../../styles/header.css';
import {Link, useLocation} from 'react-router-dom';
import {Paper, Tabs, Tab} from '@material-ui/core';
import {Email, GitHub, LinkedIn} from '@material-ui/icons';


const Header: React.FC = () => {
    const location = useLocation();

    const renderSocialButton = (link: string, children: JSX.Element): JSX.Element => (
        <a href={link}> 
            {children}
        </a>
    );

    return (
        <Paper square>
            <Tabs
                value={location.pathname}
                indicatorColor='primary'
                textColor='primary'
                aria-label='menu tabs'
                centered
            >   
                <Tab 
                    label='Home'
                    className={'tab_nav'}
                    component={Link}
                    to={'/'}
                    value={'/'} 
                />
                <Tab 
                    label='About'
                    className={'tab_nav'}
                    component={Link}
                    to={'/about'}
                    value={'/about'} 
                />
                <Tab 
                    label=''
                    className={'space_nav'}
                    disabled
                />
                <Tab 
                    component={ forwardRef(() => 
                        renderSocialButton('https://example.com', <Email className={'social_icon'} />)
                    )}
                />
                <Tab 
                    component={ forwardRef(() => 
                        renderSocialButton('https://example.com', <GitHub className={'social_icon'} />)
                    )}
                />
                <Tab 
                    component={ forwardRef(() => 
                        renderSocialButton('https://example.com', <LinkedIn className={'social_icon'} />)
                    )}
                />
            </Tabs>
        </Paper>
    );
};

export default Header;

Answer 1

I think you're having problems because of the way that you're passing in a function inside of your component prop.

The Material UI docs suggest that you should "avoid inline functions and pass a static component to the component prop instead."

Ex. (from the docs):

const CustomLink = React.useMemo(
    () =>
      React.forwardRef((linkProps, ref) => (
        <Link ref={ref} to={to} {...linkProps} />
      )),
    [to],
  );

Then you could pass that inside of your component prop, rather than the function.