form using React hook form and redux toolkit. then routes in react router dom

I am trying to make a multi step form using react hook form and redux toolkit. My forms are working fine. They are sending data. My 1st form is at "/" path. This gets completed then 2nd form comes at "/step2" path. But when 2nd form completes then routes becomes "/step2/step3". Why it is not "/step3" ? 3rd form comes at "/step3" . I am using useNavigate hook.

       export const FormStep1 = () => {
          const dispatch = useDispatch();
          const navigate = useNavigate();
          const email = useSelector((state) => state.email);
          const password = useSelector((state) => state.password);
        
          const {
            handleSubmit,
            register,
            formState: { errors },
          } = useForm({
            resolver: yupResolver(schema),
            defaultValues: { email, password },
          });
        
          const submit = (data) => {
            dispatch(chooseEmail(data.email));
            dispatch(choosePassowrd(data.password));
            navigate("./step2");
          };
        

Below is how i setup routes

            function App() {
              return (
                <BrowserRouter>
                  <Routes>
                    <Route exact path="/" element={<FormStep1 />} />
                    <Route path="/step2" element={<FormStep2 />} />
                    <Route path="/step3" element={<FormStep3 />} />
                  </Routes>
                </BrowserRouter>
              );
            }
           
please guide where i am doing wrong.