React Admin Sign up page can't access - firebase

Question

I have created a custom sign up page that i am trying to access from a custom login screen. I am using the firebase connecters for authProvider. How can I allow the page to go to the sign up page without being authenticated?
Here is the app.tsx:
function App() {
return (
<Admin
authProvider={firebaseAuthProvider}
dataProvider={firebaseDataProvider}
i18nProvider={i18nProvider}
loginPage={LoginPage}
>
<Resource name="researchers" list={ListGuesser} />
<CustomRoutes noLayout>
<Route path="/signup" element={<SignUpPage />} />
</CustomRoutes>
</Admin>
);
}
And the login page:
import React from "react";
import {
Stack,
Card,
CardContent,
Typography,
TextField,
Button,
Link,
} from "#mui/material";
import { Title, useTranslate } from "react-admin";
export const LoginPage = () => {
const t = useTranslate();
const handleSubmit = () => {};
return (
<Card>
<Title title="Sign Up!" />
<CardContent>
<Stack>
<Stack alignItems="center">
<Typography>{t("login.login")}</Typography>
</Stack>
<Stack component="form" onSubmit={handleSubmit}>
<TextField
margin="normal"
required
fullWidth
id="email"
label={t("email")}
name="email"
autoComplete="email"
autoFocus
/>
<TextField
margin="normal"
required
fullWidth
name="password"
label={t("password")}
type="password"
id="password"
autoComplete="current-password"
/>
<Button
type="submit"
fullWidth
variant="contained"
sx={{ mt: 3, mb: 2 }}
>
{t("login.signin")}
</Button>
</Stack>
<Typography>{t("login.or")}</Typography>
<Link href="/signup">{t("signup.signup")}</Link>
</Stack>
</CardContent>
</Card>
);
};
The link on the login page is where the problem is.

Answer 1

I faced the same problem and kind of sorted it out. I think it's a problem with RAF. By default you don't need to write extra codes to make it work.
I have posted here.