when I use ethers js , I cant connect with contract

import React, { useEffect, useState } from 'react'

import { abi, contractAddress } from '../config.json'
import { ethers } from "ethers"
import { sync } from 'framer-motion';
//import { toast } from 'react-toastify';

export const BlockchainContext = React.createContext("");

export const BlockchainProvider = ({ children }) => {
    const [balance, setBalance] = useState();
    const [renterExists, setRenterExists] = useState()
    const [renter, setRenter] = useState()

    const [currentAccount, setCurrentAccount] = useState("");





    let signer = null;

    let provider = null;
    if (window.ethereum == null) {
        console.log("MetaMask not installed; using read-only defaults")
        provider = ethers.getDefaultProvider()
    } else {

        provider = new ethers.BrowserProvider(window.ethereum)
        signer = provider.getSigner();

    }

    const address = contractAddress;
    const contractAbi = abi;
    const contract = new ethers.Contract(address, contractAbi, signer);
    const connectWallet = async () => {
        try {
            if (!window.ethereum) return alert("please install metamask")
            const accounts = await provider.send("eth_requestAccounts");
            console.log(accounts[0])
            setCurrentAccount(accounts[0])

            console.log(currentAccount)

        } catch (error) {
            console.log(error)
            throw new Error("no ethereum object")

        }
    }

    const checkifWalletIsConnected = async () => {
        try {
            if (!window.ethereum) return alert("Please install Metmask")

            const accounts = await provider.send("eth_accounts");
            if (accounts.length) {
                setCurrentAccount(accounts[0])
            } else {
                console.log("No accounts found")
            }
        } catch (error) {
            console.log(error)
        }
    }


    const checkRenterExists = async () => {
        try {
            if (currentAccount) {
                const renter = await contract.renterExists(currentAccount)
                setRenterExists(renter);
                if (renter) {
                    await getRenter();
                }
            }
        } catch (error) {
            console.log(error)
        }
    }

    const getRenter = async () => {
        try {
            if (currentAccount) {
                const renter = await contract.getRenter(currentAccount)
                setRenter(renter)
            }
        } catch (error) {
            console.log(error)
        }
    }



    useEffect(() => {
        checkifWalletIsConnected()
        connectWallet

    }, [currentAccount])


    return (
        <BlockchainContext.Provider
            value={{ connectWallet, currentAccount, renterExists }}
        >
            {children}
        </BlockchainContext.Provider>
    )

}

enter image description here

I think the problem here enter image description here

I cant use

const provider = new ethers.providers.Web3Provider(window.ethereum)
    const signer = provider.getSigner()

    const address = contractAddress;
    const contractAbi = abi;
    const contract = new ethers.Contract(address, contractAbi, signer);

enter image description here

Everything else works But I think the problem is const contract = new ethers. Contract(address, contractAbi, signer);

Also, it seems that the ethers library does not contain ethers.providers

• you are using ethers.js v6

This is the signature for getDefaultProvider

function getDefaultProvider(network: string | Networkish | WebSocketLike, options?: any): AbstractProvider
import getDefaultProvider

you need to pass network url as string

• second thing provider.getSigner() returns Promise.

  BrowserProvider.getSigner(address?: string | number | undefined): Promise<ethers.JsonRpcSigner>
  

you should add then() or write the logic inside async function so that you can await it