How do I automatically redirect a user to a default URL using react-router-dom?

Question

I'm currently using a "/programs" route that will render a side navigation bar and an <Outlet/>. I have my routes set up like this:

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <Error />,
    children: [
      { path: "/", element: <Home /> },
      { path: "progress", element: <Progress /> },
      { path: "logworkout", element: <LogWorkout /> },
      {
        path: "programs",
        element: <Programs />,
        children: [
          { path: "discover", element: <DiscoverPrograms /> },
          { path: "myprograms", element: <MyPrograms /> },
        ],
      },
      { path: "product", element: <Product /> },
      { path: "contact", element: <Contact /> },
    ],
  },
]);

And the element rendered on "/programs" like this:

import SideBar from "../../components/Programs/SideBar";
import { Outlet } from "react-router-dom";

const Programs = () => {
  return (
    <div className="grid overflow-hidden" style={{gridTemplateColumns: "auto 1fr"}}>
      <SideBar />
      <div className="overflow-auto">
        <Outlet />
      </div>
    </div>
  );
};

export default Programs;

When I navigate to "/programs", it will show the side bar with an empty space where <Outlet/> because I'm not currently on any route where <Outlet/> would render something. I want to make it so that if someone were to enter "/programs" in the url in automatically takes you to "/programs/myprograms" instead. Is this possible? The closest I got to was using redirect() but I don't like how it renders the entire page first.