ReactJS/NextJS - useState crashes tab

At line #27, setOpenAddFolders(true) causes the whole tab to freeze. I have tried everything and searched everywhere, nothing. I used similar code (set a usestate var) in a different file, it works, but the code below just won't work.

I did also added console.log, but it shows that the setState did not do anything, instead it just crashes the whole tab.

Here is the error from the terminal (note that this is after the tab freezes):

error - uncaughtException: Error: No router instance found. you should only use "next/router" inside the client side of your app. https://nextjs.org/docs/messages/no-router-instance
    at noRouter (D:\xxxxx\node_modules\next\dist\server\render.js:54:11)
    at ServerRouter.push (D:\xxxxx\node_modules\next\dist\server\render.js:73:9)
    at Timeout.eval [as _onTimeout] (webpack-internal:///./pages/storage/uploadFiles.tsx:37:24)
    at listOnTimeout (internal/timers.js:554:17)
    at processTimers (internal/timers.js:497:7)```

import {useRouter} from "next/router";
import React, {useState} from "react";
import {BsArrowDownCircle} from "react-icons/bs";
import {auth} from "./../../firebase"; 
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

export default function uploadFiles() {
    const router = useRouter();
    const [loggedIn, setLoggedIn] = useState(false);
    const [openAddFolders, setOpenAddFolders] = useState(false);
    auth.onAuthStateChanged(function(user) {
    if (user) {
        setLoggedIn(true);
    }else{
        toast.error("Please Sign In, You Are Being Redirected");
        setTimeout(function(){
            router.push("/");
        }, 5000);
    }
    });
   

    function openAddFoldersMenu()
    {
        setOpenAddFolders(true);
    }


    function openUploadImagesMenu()
    {
        console.log("b");
    }

    return(
        <React.Fragment>
            <ToastContainer />
            {loggedIn ?
                <div className="flex items-center justify-center">
                    <div className="w-1/2">
                        <div onClick={openAddFoldersMenu} className="hover:cursor-pointer my-10 rounded-t-3xl w-full p-9 hover:bg-cyan-400 hover:text-white hover:shadow-cyan-500/50 shadow-lg ease-linear duration-100">
                            <div className="flex justify-between">
                                <h1>Add Folders</h1>
                                <BsArrowDownCircle className="animate-bounce" size={20} />
                            </div>
                            {/* <div className={addFolders ? "" : "hidden"}>
                                Some Information
                                
                            </div> */}
                        </div>

                        <div onClick={() => openUploadImagesMenu()} className="hover:cursor-pointer rounded-t-3xl w-full p-9 hover:bg-cyan-400 hover:text-white hover:shadow-cyan-500/50 shadow-lg ease-linear duration-100">
                            <div className="flex justify-between">
                            <h1>Upload Images</h1>
                                <BsArrowDownCircle className="animate-bounce" size={20} />
                            </div>
                            <div className="hidden">
                                Some Information
                            </div>
                        </div>
                    </div>
                </div>
            :
            <div className="w-[100vw] h-[100vh] bg-red-500 flex items-center justify-center">
                <h1 className="text-gray-50 text-7xl text-center">There Was A Problem Loading, <br /> Please Sign In</h1>
            </div>
            }
        </React.Fragment>
        
    );    
};