react router how can I render only the component in his route whiout the others?

How can I show only Modificar component in /Modificar and the both BasicTable and FormTareas in

<BrowserRouter>
                {
                    <Switch>
                        <Route
                            exact
                            path="/Modificar"
                            component={() => (
                                <Modificar
                                    tareaACambiar={tareaACambiar}
                                    actualizar={actualizar}
                                />
                            )}
                        />
                    </Switch>
                }

                <FormTareas
                    handleChange={handleChange}
                    handleSubmit={handleSubmit}
                    validateForm={validateForm}
                ></FormTareas>
                <BasicTable
                    tareas={tareas}
                    eliminarTarea={eliminarTarea}
                    modificarTarea={modificarTarea}
                ></BasicTable>
            </BrowserRouter>

Is working but when I scroll in /Modificar the other two components too render. I try put the other in a switch and a route but then the function that I pass doesn’t work 🙁 The code is here https://github.com/JavierLoera/Lista-Tareas. and the preview is here https://lista-tareas-gilt.vercel.app/

Answer

because they are added after your routing logic, to avoid that u need to add them in another route