Preserve Scroll Position in React?

So I want to preserve scroll position after viewing an individual post. I can do this when I went to individual post, and then not scrolling in individual post, return back to home page. It will preserver the scroll position. But when I scrolled in the individual post page, and then return to home page, the scroll position is messed up. Here are snippets of the code:

Home.jsx

    const [posts, setPosts] = useState([]);
    const [startIndex, setStartIndex] = useState(0);
    const [range, setRange] = useState(6);
    const [loading, setLoading] = useState(true)


    useEffect(() => {
        const fetchPosts = async () => {
            try {
                const response = await axios.get(`/api/posts`);
                setPosts(response.data);
                console.log(response.data);
            } catch (e) {
                console.log(e);
            } finally {
                setLoading(false);
            }
        };

        fetchPosts();
        setRange(sessionStorage.getItem('range') ? parseInt(sessionStorage.getItem('range')) : 6);
    }, []);

    useEffect(() => {
        const attemptScrollRestore = () => {
            const savedPosition = parseInt(sessionStorage.getItem('HomeScroll') || '0');
            if (document.body.scrollHeight > savedPosition) {
                window.scrollTo(0, savedPosition);
            } else {
                setTimeout(attemptScrollRestore, 50); 
            }
        };

        if (loading === false) { 
            attemptScrollRestore();
        }
    }, [loading]); // This useEffect depends on the loading state


    useEffect(() => {
        const handleScroll = () => {
          sessionStorage.setItem('HomeScroll', window.scrollY.toString());
        }

        window.addEventListener('scroll', handleScroll);
        return () => {
            window.removeEventListener('scroll', handleScroll);
        };
    }, []);

Post.jsx

    const [post, setPost] = useState({});
    const [comment, setComment] = useState('');
    const [comments, setComments] = useState([]);
    const [honeypot, setHoneypot] = useState("");
    const [loading, setLoading] = useState(true)
    const {postID} = useParams();
    const navigate = useNavigate();

    useEffect(() => {
        window.scrollTo(0, 0);
    }, []);


    useEffect(() => {



        const fetchPosts = async () => {
            const response = await axios.get("/api/singlePost", {
                params: {
                    id: postID
                }
            });
            setPost(response.data);
        }

        const fetchComments = async () => {
            const response = await axios.get("/api/getComments", {
                params: {
                    id: postID
                }
            });
            setComments(response.data);
        }

        const updatePosts = async () => {
            const response = await axios.put(`/api/updatePost?id=${postID}`);
        }
        fetchPosts();
        fetchComments();

        const timer = setTimeout(() => {
            updatePosts();
        }, 1750);

        return () => clearTimeout(timer);

    }, [postID]);

I did try to not change scroll position in Post.jsx, but it still not working. Tried to use custom state also not working. It seems like something in Post.jsx messing up with the local storage? Or when I went back to homepage, it resetted to 0,0 without giving a chance to restore the scroll position. That what I can think of right now. Appreciate any help