Why is redirect not working here

[SyedImam1998]

App.js:

import Login from './Login.jsx';
import Home from './Home.jsx'
import {Routes,Route} from 'react-router-dom';
export default function App() {
  return (
   <div>
     <Routes>
       <Route path="/" element={<Login />} />
       <Route path="/home" element={<Home />} />
     </Routes>
   
   
   </div>
  )
}

Login.jsx

import {useNavigate,redirect} from 'react-router-dom';
const Login = () => {
  const navigate= useNavigate();
  const fun=()=>{
    // navigate('/home')
    return redirect('/home');
  }
  return (
    <div>
      <h1>Hello Login!</h1>
      <button onClick={fun}>login</button>
    </div>
  )
}

export default Login;

Home.jsx

const Home = () => {
  return (
    <div>
      <h1>Home Page</h1>
    </div>
  )
}

export default Home;

Please help me understand why redirect is not working in login page I have followed same as mentioned here: here

Am I doing any thing wrong. Please help this noob understand this concept. in simple way

[brophdawg11]

redirect is a utility function for use in loaders and actions as the docs state, it is not meant for navigating in the component lifecycle. You need to use navigate to navigate from the component lifecycle.

[IDONTSUDO]

Why is this system function included in the general export of all functions?

[brophdawg11]

It's not a system function. It is public API when using RouterProvider - it's just being used incorrectly in OP's example.