Embed code onto another page and use their variables - reactjs

Question

I have created a web app in React with several pages. To make it a bit secure for our department, at least so everyone can't enter the site and see what's going on, there are some code that does some checks, and also creates some variables I can use for each of my pages.
The issue is that this code is the same on every single page.
So basically it looks something like:
const MyApp= () => {
const { instance, accounts, inProgress } = useMsal();
const [accessToken, setAccessToken] = useState<any>(null);
const name = accounts[0] && accounts[0].name;
const email = accounts[0] && accounts[0].username;
const isAuthenticated = useIsAuthenticated();
useEffect(() => {
const request = {
...loginRequest,
account: accounts[0],
};
instance
.acquireTokenSilent(request)
.then((response: any) => {
setAccessToken(response.accessToken);
})
.catch(() => {
instance.acquireTokenPopup(request).then((response: any) => {
setAccessToken(response.accessToken);
});
});
}, [isAuthenticated]);
function POST(path: string, data: any) {
return fetch(`${fetchUrl}${path}`, {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: accessToken,
},
body: JSON.stringify(data),
});
}
<something else>
return (
<>
<div>{name}</div>
<div>{email}</div>
</>
);
};
export default MyApp;
And it's just annoying to write this on every page. So is there some way to create some kind of component, and then embed it into all pages, where I still have the option to use the const variables created ?