React Page scroll and page link concurrently

// ... imports ...

const Page = ({ path, children }) => {
    const ref = useRef();
    const navigate = useNavigate();
    const location = useLocation();

    const handleWheel = (e) => {
        const target = e.deltaY > 0 ? 'next' : 'prev';
        const sibling = ref.current[target + 'ElementSibling'];

        if (sibling) {
            sibling.scrollIntoView({ behavior: 'smooth' });
        }
    };

    useEffect(() => {
        const scrollHandler = () => {
            const rect = ref.current.getBoundingClientRect();
            const isInView = rect.top >= 0 && rect.bottom <= window.innerHeight;

            if (isInView && location.pathname !== path) {
                navigate(path);
            }
        };

        window.addEventListener('scroll', scrollHandler);
        return () => {
            window.removeEventListener('scroll', scrollHandler);
        };
    }, [path, navigate, location.pathname]);

    return (
        <div ref={ref} onWheel={handleWheel}>
            <h1>Page {path}</h1>
            {children}
        </div>
    );
};


function App() {
    return (
        <div>
            <Sidebar />
            <Routes>
                {/* ... other routes ... */}
                <Route path="/cargo" element={<Page path="/cargo"><Cargo /></Page>} />
                <Route path="/pax" element={<Page path="/pax"><Pax /></Page>} />
                <Route path="/weather" element={<Page path="/weather"><WeatherPage /></Page>} />
                <Route path="/charter" element={<Page path="/charter"><Charter /></Page>} />
                <Route path="/vale" element={<Page path="/vale"><Vale /></Page>} />
                <Route path="/reporting" element={<Page path="/reporting"><Reporting /></Page>} />
            </Routes>
        </div>
    );
}

export default App;