build a proper alignment for a footer

I just review a footer to make it better using a different UI framework. I try to align it but it's not properly working. The right side is not is overlapping. I tried using <div> and apply the style to set up a different element.

The issue I have is the text Follow behind the button need to be aligned with the icons and the image, input form, button and text 'Follow' and icons must be aligned in one single line and centred in the middle of the page.

The copyright text on the second line is properly aligned

I tried different combination but still not properly done

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Toolbar, Button } from '@material-ui/core';
import AppBar from '@material-ui/core/AppBar';
import VillageLogo from '../assets/images/village-logo.svg';
import InputBase from '@material-ui/core/InputBase';
import TextContents from '../theme/TextContents';
import FacebookIcon from '@material-ui/icons/Facebook';
import TwitterIcon from '@material-ui/icons/Twitter';
import InstagramIcon from '@material-ui/icons/Instagram';
import LinkedInIcon from '@material-ui/icons/LinkedIn';

const useStyles = makeStyles(theme => ({
    root: {
      display: "flex",
      boxShadow: "none",
      backgroundColor:  "#ffffff",
      marginTop: theme.spacing(3)
    },
    logo: {
        width:"214px",
        height:"28px",
        marginLeft: theme.spacing(20),
        marginRight: theme.spacing(3)

    },
    subscribe: {
        display: "flex",
        position: 'relative',
        borderRadius: "21px",
        backgroundColor: "#f4f7f8",
        marginRight: theme.spacing(2),
        marginLeft: theme.spacing(3),
        width: "467px",
        height: "40px",
       // [theme.breakpoints.up('sm')]: {
       //   marginLeft: theme.spacing(3),
      //    width: 'auto',
       // },
      },
      inputRoot: {
        color: "#cecece",
        fontFamily: "Source Sans Pro",
        fontSize: "18px"
      },
      inputInput: {
        paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
        width: "467px",
      //  [theme.breakpoints.up('md')]: {
      //    width: '20ch',
      //  },
      },
      whiteButton:{
        borderRadius: 21, 
        fontSize: '14px' ,
        fontWeight: "bold",
        textAlign: "center",
        color: "#ff7255",
        boxShadow: "0px 8px 18px 0 rgba(0,0,0,0.14)",
        paddingTop: "5px",
        paddingBottom: "7px",
        paddingLeft: "20px",
        paddingRight: "20px",
        backgroundColor: "#ffffff", 
        borderColor: "#ffffff",
        fontFamily: "Source Sans Pro",
      },
      textFollow:{
        fontSize: '14px' ,
        fontWeight: "bold",
        textAlign: "center",
        color: "#ff7255",
        fontFamily: "Source Sans Pro",
      },
      textCopy:{
        fontSize: '14px' ,
        fontWeight: "bold",
        textAlign: "center",
        color: "#ff7255",
        fontFamily: "Source Sans Pro",
      },
      socialIcon:{
          width: '18px',
          height:'18px',
          color: '#ff7255'
      },
      followDesc:{
        display: "flex",
        alignItems: "center",
        marginLeft: theme.spacing(2),
        margin: "auto",
      },
      footerMenu:{
          display: "flex",
          position: 'relative'
      }

  }));


function Footer(){

    const styles = useStyles();

    return (
        <div className={styles.root}>
            <AppBar position="static" className={styles.root}>
                <Toolbar>
                    <img src={VillageLogo} alt="logo" className={styles.logo}/>
                    <div className={styles.footerMenu}>
                        <div className={styles.subscribe}>
                            <InputBase
                                placeholder={TextContents.SearchPlaceHolder}
                                classes={{
                                    root: styles.inputRoot,
                                    input: styles.inputInput,
                                }}
                                inputProps={{ 'aria-label': 'subscribe' }}/>
                            <Button className={styles.whiteButton}> {TextContents.Join}</Button>
                        </div>
                        <div className={styles.followDesc}>
                            <p className={styles.textFollow}>{TextContents.Follow}</p>
                            <FacebookIcon className={styles.socialIcon}/>
                            <TwitterIcon className={styles.socialIcon}/>
                            <InstagramIcon className={styles.socialIcon}/>
                            <LinkedInIcon className={styles.socialIcon}/>
                        </div>
                    </div>
                </Toolbar>
                <div>
                    <p className={styles.textCopy}>{TextContents.Copyright}</p>
                </div>
            </AppBar>
        </div>
    );
}



export default Footer