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

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;