Object is Not a Function in firebase PhoneAuthentication

import * as React from "react";
import { useState } from "react";
import Avatar from "@mui/material/Avatar";
import Button from "@mui/material/Button";
import ButtonGroup from "@mui/material/ButtonGroup";
import CssBaseline from "@mui/material/CssBaseline";
import TextField from "@mui/material/TextField";
import FormControlLabel from "@mui/material/FormControlLabel";
import Checkbox from "@mui/material/Checkbox";
import Link from "@mui/material/Link";
import Paper from "@mui/material/Paper";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import Typography from "@mui/material/Typography";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import background from "../staticfiles/signin-background.jpg";
import "react-phone-input-2/lib/style.css";
import { auth, db, captcha } from "../config/Config";
import { RecaptchaVerifier } from "firebase/auth";
import { Link as RouterLink } from "react-router-dom";
import { useHistory } from "react-router-dom";

import socialMediaAuth from "../service/auth";

function Copyright(props) {
  return (
    <Typography
      variant="body2"
      color="text.secondary"
      align="center"
      {...props}
    >
      {"Copyright © "}
      <Link color="inherit" href="https://mui.com/">
        Your Website
      </Link>{" "}
      {new Date().getFullYear()}
      {"."}
    </Typography>
  );
}

const theme = createTheme();

export default function SignInUserPhone() {
  let history = useHistory();
  const [PhoneNumber, setPhoenNumber] = useState("");
  const [VerificationCode, setVerificationCode] = useState("");

  const [error, setError] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(PhoneNumber);

    console.log(error);
  };
  const handleSubmit2 = (e) => {
    e.preventDefault();
    console.log(VerificationCode);
  };

  const handleOnClick = async (provider) => {
    const res = await socialMediaAuth(provider);
    await db
      .collection("SignedUpUsersData")
      .doc(res.uid)
      .set({
        Email: res.email,
        Name: res.displayName,
      })
      .then(() => {
        history.push("/");
      })
      .catch((err) => setError(err.message));
  };

  const handleUserButton = (event) => {
    event.preventDefault();
    history.push("/signinuser");
  };

  const handleSellerButton = (event) => {
    event.preventDefault();
    history.push("/signinseller");
  };
  auth.languageCode = "it";
  const setUpCaptcha = () => {
    window.recaptchaVerifier = auth().RecaptchaVerifier("recaptcha-container", {
      size: "invisible",
      callback: (response) => {
        // reCAPTCHA solved, allow signInWithPhoneNumber.
        console.log(response);
        console.log("Ok recapthca sloved");
        onSignInSubmit();
      },
    });
  };

  const onSignInSubmit = (e) => {
    e.preventDefault();
    setUpCaptcha();
    const phoneNumber = PhoneNumber;
    const appVerifier = window.recaptchaVerifier;

    auth()
      .signInWithPhoneNumber(PhoneNumber, appVerifier)
      .then((confirmationResult) => {
        // SMS sent. Prompt user to type the code from the message, then sign the
        // user in with confirmationResult.confirm(code).
        window.confirmationResult = confirmationResult;
        console.log(confirmationResult);
        // ...
      })
      .catch((error) => {
        // Error; SMS not sent
        // ...

        console.log(error.message);

        //( Or, if you haven't stored the widget ID:
      });
  };

  return (
    <ThemeProvider theme={theme}>
      <Grid container component="main" sx={{ height: "100vh" }}>
        <CssBaseline />
        <Grid
          item
          xs={false}
          sm={4}
          md={7}
          sx={{
            backgroundImage: `url(${background})`,
            backgroundRepeat: "no-repeat",
            backgroundColor: (t) =>
              t.palette.mode === "light"
                ? t.palette.grey[50]
                : t.palette.grey[900],
            backgroundSize: "cover",
            backgroundPosition: "center",
          }}
        />
        <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
          <Box
            sx={{
              my: 8,
              mx: 4,
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
            }}
          >
            <Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
              <LockOutlinedIcon />
            </Avatar>
            <Typography component="h1" variant="h5">
              Sign in With Phone Number
            </Typography>

            <Box
              sx={{
                my: 4,
                mx: 4,
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
              }}
            >
              <ButtonGroup size="large" disableElevation variant="contained">
                <Button onClick={handleSellerButton}>SELLER</Button>
                <Button onClick={handleUserButton}>USER</Button>
              </ButtonGroup>
            </Box>

            <Box
              component="form"
              noValidate
              onSubmit={onSignInSubmit}
              sx={{ mt: 1 }}
            >
              <TextField
                margin="normal"
                required
                fullWidth
                id="email"
                label="Phone Number"
                name="Phone"
                autoComplete="phoenumber"
                value={PhoneNumber}
                onChange={(phone) => setPhoenNumber(phone.target.value)}
              />
              <div id="recaptcha-container"></div>

              <Button
                type="submit"
                fullWidth
                variant="contained"
                sx={{ mt: 3, mb: 2 }}
                onSubmit={onSignInSubmit}
                id="sign-in-button"
              >
                Send Code
              </Button>

              <Grid container>
                <Grid item xs></Grid>
                <Grid item>
                  <Link
                    component={RouterLink}
                    to="/signup"
                    href="#"
                    variant="body2"
                  >
                    {"Don't have an account? Sign Up"}
                  </Link>
                </Grid>
              </Grid>
            </Box>
            {error && <div>{error}</div>}
            <Box
              component="form"
              noValidate
              onSubmit={handleSubmit2}
              sx={{ mt: 1 }}
            >
              <TextField
                margin="normal"
                required
                fullWidth
                id="email"
                label="Verification Code"
                name="Verification"
                autoComplete="Verification"
                value={VerificationCode}
                onChange={(verification) =>
                  setVerificationCode(verification.target.value)
                }
              />
              <Button
                type="submit"
                fullWidth
                variant="contained"
                sx={{ mt: 3, mb: 2 }}
              >
                Submit
              </Button>

              <Copyright sx={{ mt: 5 }} />
            </Box>
          </Box>
        </Grid>
      </Grid>
    </ThemeProvider>
  );
}