Users can see the homepage before completely redirected to the long url - firebase

Question

i have a minor problems, whenever user click on the shorturl the total number of clicks is increased by 2 instead of 1 and the user can see the homepage for a while before being completely redirected.
here is for index.js on account components
import { useState, Fragment, useEffect, useCallback, useMemo } from 'react';
import React from 'react';
import { Box, Grid, Typography, Button, Divider, Snackbar } from '#mui/material';
import Navbar from './Navbar';
import LinkCard from './LinkCard';
import ShortenUrlModal from './ShortenUrlModal';
import { app, firestore, auth } from '../../firebase';
import { nanoid } from 'nanoid';
import copy from 'copy-to-clipboard';
function Account() {
const [newLinkToastr, setNewLinkToastr] = useState(false);
const [openModal, setOpenModal] = useState(false);
const [links, setLinks] = useState([]);
const userUid = auth.currentUser.uid
const linksPathRef = useMemo(() => firestore.collection('users').doc(userUid).collection('links'), [userUid]);
const handleCreateShortenLink = async (name, longURL) => {
const link = {
name,
longURL,
createdAt: app.firestore.FieldValue.serverTimestamp(),
shortCode: nanoid(6),
totalClicks: 0
};
const resp = await linksPathRef.add(link);
setLinks((links) => [...links, { ...link, createdAt: new Date(), id: resp.id }])
setOpenModal(false)
};
useEffect(() => {
const fetchLinks = async () => {
const snapshot = await linksPathRef.get()
const tempLinks = [];
snapshot.forEach((doc) => tempLinks.push({ ...doc.data(), id: doc.id, createdAt: doc.data().createdAt.toDate() }));
setLinks(tempLinks);
}
fetchLinks()
},[linksPathRef]);
const handleDeleteLink = useCallback(async (linkDocID) => {
await linksPathRef.doc(linkDocID).delete()
setLinks(oldLinks => oldLinks.filter(link => link.id !== linkDocID))
}, [linksPathRef]);
const handleCopyLink = useCallback(shortUrl => {
copy(shortUrl);
setNewLinkToastr(true)
}, [])
return (
<>
<Snackbar open={newLinkToastr} onClose={() => setNewLinkToastr(false)} autoHideDuration={1000} message="Link Copied"/>
{openModal && <ShortenUrlModal createShortenLink={handleCreateShortenLink} handleClose={() => setOpenModal(false)} />}
<Navbar />
<Box mt={5}>
<Grid container justifyContent="center">
<Grid item xs={8}>
<Box mb={5} display="flex">
<Box mr={3}>
<Typography variant="h4">Links</Typography>
</Box>
<Button onClick={() => setOpenModal(true)} disableElevation variant="contained" color="primary">Create New</Button>
</Box>
{links.sort((prevLink, nextLink) => nextLink.createdAt - prevLink.createdAt).map((link, idx) => (
<Fragment key={link.id}>
<LinkCard {...link} deleteLink={handleDeleteLink} copyLink={handleCopyLink} />
{ idx !== links.length -1 && ( <Box my={4}>
<Divider />
</Box>
)}
</Fragment>
))}
</Grid>
</Grid>
</Box>
</>
)
}
export default Account
and this is for redirect components
import { useParams } from 'react-router-dom';
import { useEffect, useState, useCallback } from 'react';
import React from 'react';
import { firestore, app } from '../../firebase';
import { CircularProgress, Box, Typography } from '#mui/material';
function LinkRedirect() {
const { shortCode } = useParams();
const [loading, setLoading] = useState(true);
const fetchLinkDoc = useCallback(async () => {
try {
const linkDoc = await firestore.collection('links').doc(shortCode).get();
if (linkDoc.exists) {
const { longURL, linkID, userUid } = linkDoc.data();
await firestore
.collection('users')
.doc(userUid)
.collection('links')
.doc(linkID)
.update({
totalClicks: app.firestore.FieldValue.increment(1)
});
window.location.href = longURL;
} else {
setLoading(false);
}
} catch (error) {
console.error(error);
setLoading(false);
}
}, [shortCode]);
useEffect(() => {
fetchLinkDoc();
}, [fetchLinkDoc]);
if (loading)
return (
<Box mt={10} textAlign="center">
<CircularProgress />
<Typography>Redirecting to the link</Typography>
</Box>
);
else
return (
<Box mt={10} textAlign="center">
<Typography>Link is not valid</Typography>
</Box>
);
}
export default LinkRedirect;
i use react-router-dom v6 and firebase/firestore v9
I want the total clicks to increase by only 1 and I want the user to not see the homepage before being redirected.