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

Question

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.

Answer 1

From the react-router-dom docs:

Either pass a To value (same type as <Link to>) with an **optional second { replace, state } arg or**

I believe the issue is that you are not passing the second argument to useNavigate() when routing to /step3.

Answer 2

Found the solution to the gradient part of my own question. The trick is Image().paint() (https://developers.google.com/earth-engine/apidocs/ee-image-paint). It explains here - https://developers.google.com/earth-engine/guides/image_visualization - how to do it:

To color the feature edges with values set from a property of the features, set the color parameter to the name of the property with numeric values

You have to create an empty image first, then paint it based on a numeric property, like "revenue". Here's how to do it specifically:

empty = ee.Image().byte() # just an empty "Image"
piano_shops = ee.FeatureCollection('my/feature/collection')
painted_pianos = empty.paint(piano_shops, 'revenue', 8) 
# parameters of paint() are: 
# FeatureCollection, property (must be numeric)
# to govern the color gradient/code, width (can 
# be a number or can also be set to a numeric property)

palette = ['FF0000', '00FF00', '0000FF']
url = ee.data.getTileUrl(
    painted_pianos.getMapId({'palette': palette, 'max':1000000}), 0, 0, 0
)