Page is not showing up

I'm trying to build a website using react, its show successfully compiled in terminal but nothing shows up when npm run start. here's the App.js

import { useState } from 'react';
import './App.css';
import MainMint from './MainMint';
import NavBar from './NavBar';

function App() {
  const [accounts, setAccounts] = useState([]);
  
  return (
    <div className="App">
      <NavBar accouts={accounts} setAccounts={setAccounts} />
      <MainMint accouts={accounts} setAccounts={setAccounts} />
    </div>
  );
}

export default App;

here's the NavBar.js

import React from 'react';


const NavBar = ({ accounts, setAccounts }) => {
    const isConnected = Boolean(accounts[0]);

    async function connectAccount() {
        if (window.ethereum) {
            const accounts = await window.ethereum.request({
                method: "eth_requestAccounts",
            });
            setAccounts(accounts);

        }
    }

    return (
        <div>
            <div>Facebook</div>
            <div>Twitter</div>
            <div>Email</div>

            <div>About</div>
            <div>Mint</div>
            <div>Team</div>

            {isConnected ? (
                <p>Connected</p>
            ) : (
                <button onClick={connectAccount}>Connect</button>
            )}
        </div>
    );
};

export default NavBar;

MainMint.js

import { useState } from 'react';
import { ethers, BigNumber } from 'ethers';
import roboPunksNFT from './RoboPunksNFT.json';



const roboPunksNFTAddress = "0xE6849E3b1085562C6F2733e01A5C484754D2e823";

const MainMint = ({ accounts, setAccounts }) => {
    const [mintAmount, setMintAmount] = useState(1);
    const isConnected = Boolean(accounts[0]);

    async function handleMint() {
        if (window.ethereum) {
            const provider = new ethers.providers.Web3Provider(window.ethereum);
            const signer = provider.getSigner();
            const contract = new ethers.Contract(
                roboPunksNFTAddress,
                roboPunksNFT.abi,
                signer
            );
            try {
                const response = await contract.mint(BigNumber.from(mintAmount));
                console.log('response: ', response);
            } catch (err) {
                console.log("error: ", err)
            }
        }
    }

    const handleDecrement = () => {
        if (mintAmount <= 1) return;
        setMintAmount(mintAmount - 1)
    };

    const handleIncrement = () => {
        if (mintAmount >= 3) return;
        setMintAmount(mintAmount + 1)
    };

    return (
        <div>
            <h1>Gaint Ammar</h1>
            <p>It's 2078, 120kg ammar is dead!</p>
            {isConnected ? (
                <div>
                    <div>
                        <button onClick={handleDecrement}>-</button>
                        <input type="number" value={mintAmount} />
                        <button onClick={handleIncrement}>+</button>
                    </div>
                    <button onClick={handleMint}>Mint Now</button>
                </div>
            ) : (
                <p>You must be connected to Mint.</p>
            )}
        </div>
    );
};

export default MainMint;

is there any problem with

const isConnected = Boolean(accounts[0]);

its also shows DevTools failed to load source map: Could not load content for chrome-extension://cmndjbecilbocjfkibfbifhngkdmjgog/lib/browser-polyfill.js.map: System error: net::ERR_BLOCKED_BY_CLIENT in developer mode and some errors react-don.development.js.