Open page and scroll to section React Router dom - reactjs

Question

Goal: I want to make it so that when I click a button in my navbar, it takes the user to a page and a section of the page.
This is how I would do it with regular html.
<a href="secondpage#section"/>
But how can this be accomplished with React-router-dom?
Here is what I have tried so far but it wont scroll to the correct section on click:
https://codesandbox.io/s/hopeful-night-q06msw
import { AppBar, Button, Toolbar } from "#mui/material";
import React from "react";
import { Link } from "react-router-dom";
export default function Navbar() {
return (
<AppBar position="fixed">
<Toolbar>
<Button component={Link} to="/" sx={{ color: "#fff" }}>
Hello
</Button>
<Button component={Link} to="/second" sx={{ color: "#fff" }}>
SecondpageTop
</Button>
<Button
component={Link}
to={{ pathname: "/second", hash: "#sectiontwo" }}
sx={{ color: "#fff" }}
>
SecondpageSectionwo
</Button>
</Toolbar>
</AppBar>
);
}
import { Box, Typography } from "#mui/material";
import React from "react";
import Navbar from "./Navbar";
export default function () {
return (
<>
<Navbar></Navbar>
<Typography sx={{ mt: "50px", color: "red" }}>Sup</Typography>
<Box
sx={{
width: "150px",
height: "150px",
mb: "1000px",
backgroundColor: "red"
}}
>
<Typography sx={{ color: "#fff" }}>This is the top box</Typography>
</Box>
<div
id="sectiontwo"
style={{ width: "150px", height: "150px", backgroundColor: "blue" }}
>
<Typography sx={{ color: "#fff" }}>
This is where to scroll to
</Typography>
</div>
</>
);
}