As I'm learning react and trying to build a Facebook clone, I have been experiencing minor errors within a few classes

WARNING in [eslint] 
src\Header.js       
  Line 19:22:  'dispatch' is assigned a value but never used  no-unused-vars

src\LogIn.js
  Line 10:10:  'state' is assigned a value but never used  no-unused-vars

import React from 'react';
import './Header.css';
import SearchIcon from '@mui/icons-material/Search';
import HomeIcon from '@mui/icons-material/Home';
import FlagIcon from '@mui/icons-material/Flag';
import SubscriptionsIcon from '@mui/icons-material/Subscriptions';
import StorefrontIcon from '@mui/icons-material/Storefront';
import SupervisedUserCircleIcon from '@mui/icons-material/SupervisedUserCircle';
import { Avatar, IconButton } from '@mui/material';
import AddIcon from '@mui/icons-material/Add';
import ForumIcon from '@mui/icons-material/Forum';
import NotificationsActiveIcon from '@mui/icons-material/NotificationsActive';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { useStateValue } from './StateProvider';


function Header() {

    const [{ user }, dispatch] = useStateValue();

  return (
    <div className="header">

        {/* left-side of the header */}
        <div className="header_left"> 
            
            {/* logo */}
            <img src="./FacebookLogo.png"  alt=" "/>

            {/* Search bar */}
            <div className="header_input">
                <SearchIcon/>
                <input placeholder="Search Facebook"
                type="text" />
            </div>

        </div>


        {/* - middle of the header 
            - header-option-active: used to determine an active window 'red underline' */}
        <div className="header_middle">
            
            <div className="header_option header-option-active">
                <HomeIcon fontSize="large"/>
            </div>

            <div className="header_option">
                <FlagIcon fontSize="large"/>
            </div>

            <div className="header_option">
                <SubscriptionsIcon fontSize="large"/>
            </div>

            <div className="header_option">
                <StorefrontIcon fontSize="large"/>
            </div>

            <div className="header_option">
                <SupervisedUserCircleIcon fontSize="large"/>
            </div>

         </div>


        {/* right-side of the header */}
        <div className="header_right"> 
            <div className="header_info">
                <Avatar src={user.photoURL} />
                <h4> {user.displayName} </h4>
            </div>

            <IconButton>
                <AddIcon/>
            </IconButton>

            <IconButton>
                <ForumIcon/>
            </IconButton>

            <IconButton>
                <NotificationsActiveIcon/>
            </IconButton>

            <IconButton>
                <ExpandMoreIcon/>
            </IconButton>

        </div>

    </div>
  )
}

export default Header;

import { Button } from '@mui/material';
import React from 'react';
import './LogIn.css';
import { auth, provider } from './firebase';
import { useStateValue } from './StateProvider';
import { actionTypes } from './Reducer';

function LogIn() {

  const [state, dispatch] = useStateValue();

    const signIn = () => {
        auth
            .signInWithPopup(provider)
            .then((result) => {           
              dispatch({
                type: actionTypes.SET_USER,
                user: result.user,
              });
            })
            .catch((error) => alert(error.message));
    };

  return (
    <div className="login">

        <div className="login_logo">
            <img src="./FacebookLogo.png" alt=""/>
            <img src="./Facebook-Logo.png" alt=""/>
        </div>

        <Button type="submit" onClick={signIn}>
           Sign In 
       </Button>
        
    </div>
  )
}

export default LogIn;

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
    apiKey: "AIzaSyA0MMeSEDIlg-En9c0cRcRSw49mMJBodPs",
    authDomain: "facebookclone-c7f1b.firebaseapp.com",
    projectId: "facebookclone-c7f1b",
    storageBucket: "facebookclone-c7f1b.appspot.com",
    messagingSenderId: "328884375869",
    appId: "1:328884375869:web:c0c30d85d1bf32f089b554",
    measurementId: "G-369H5EMLW2"
  };


  const firebaseApp = firebase.initializeApp(firebaseConfig);

  const db = firebaseApp.firestore();

  const auth = firebase.auth();

  const provider = new firebase.auth.GoogleAuthProvider();


  export { auth, provider };

  export default db;

const [{ user }, dispatch] = useStateValue();