Routing Links do not scrollto the correct section on my page when clicking

Question

I am having problems where my navigation bar is not scrolling down to the right place when I click on the Button in the AppBar. Now it is just opening a new tab in the browser with the correct href but still with the same section(Just top of the page). I tried to wrap every <Link> component with a <section id="Contact"> and add an id. And map through the paths in my RouterNavigation But I guess I am missing something?

RouterNavigation.tsx

const RouterData = [
    {
        title: 'About',
        path: '#About',
    },
    {
        title: 'Vision',
        path: '#Vision',
    },
    {
        title: 'Contact',
        path: '#Contact',
    },
];

function RouterNavigation() {
    return (
        <>
            {RouterData.map((item, index) => (
                <li key={index}>
                    <a href={item.path}>
                        <span>{item.title}</span>
                    </a>
                </li>
            ))}
        </>
    );
}

export { RouterNavigation };

Topbar.tsx

import React from 'react';
import Toolbar from '@mui/material/Toolbar';
import Link from '@mui/material/Link';
import { AppBar, Box } from '@mui/material';

function TopBar() {
    return (
        <>
            <AppBar position={'static'} sx={{ background: 'transparent' }} elevation={0}>
                <Toolbar disableGutters>
                        <Box sx={{ display: 'flex', alignItems: 'center' }}>

                            <section id="Vision">
                            <Link
                                variant="button"
                                href="/vision"
                                target="_blank"
                                rel="noopener noreferrer"}>
                                Vision
                            </Link>
                            </section>

                            <Link
                                variant="button"
                                href="/team"
                                target="_blank"
                                rel="noopener noreferrer">
                                Team
                            </Link>
                            <Link
                                variant="button"
                                href="/contact"
                                target="_blank"
                                rel="noopener noreferrer">
                                Contact
                            </Link>
                        </Box>
                </Toolbar>
            </AppBar>
        </>
    );
}

export { TopBar };

Answer 1

I tried the proposed solution in this link " Scroll To a Particular Section with React "

I used just like in the post useRef hook. But still it does not work for me.

My TopBar.tsx

import React, { useRef } from 'react';
import Toolbar from '@mui/material/Toolbar';
import Link from '@mui/material/Link';
import { AppBar, Box } from '@mui/material';
import { Vision } from 'components/Body';

interface Props {
    visionSection: typeof Vision;
}

function TopBar(props: Props) {
    const scrollDown = (ref: any) => {
        window.scrollTo({
            top: ref.current.offsetTop,
            behavior: 'smooth',
        });
    };

    return (
        <>
            <AppBar position={'static'} sx={{ background: 'transparent' }} elevation={0}>
                <Toolbar disableGutters>
                        <Box
                            sx={{
                                display: 'flex',
                                alignItems: 'center',
                            }}>
                        </Box>
                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
                            <Link
                                onClick={() => scrollDown(props.visionSection)}
                                variant="button"
                                href="/vision">
                                Vision
                            </Link>
                        </Box>
                </Toolbar>
            </AppBar>
        </>
    );
}

export { TopBar };

My Vision.tsx

import React from 'react';
import Typography from '@mui/material/Typography';

interface Props {
    visionSection: typeof Vision;
}

function Vision(props: Props) {
    return (
            <Typography fontWeight={'bold'} variant={'h5'} sx={{ textAlign: 'center' }}>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </Typography>
    );
}
export { Vision };

My App.tsx

import React from 'react';
import { Header, Contact, Vision } from 'components/Body';
import { TopBar } from 'components/TopBar';
import { Footer } from 'components/Footer';
import { Container } from '@mui/material';
import { AboutUs } from 'components/Body/AboutUs';

function App() {
    return (
        <Container disableGutters>
            <Header />
            <Vision visionSection={Vision}/>
            <AboutUs />
            <Contact />
            <Footer />
        </Container>
    );
}

export { App };