I have a homepage component in react.js . This component gets props from the app component(one of them being userName). When the user enters his name on this page,the user variable gets its value updated and correspondingly the setusername function calls the setUserName in the App component.I am getting too many re-renders error in the following code:

Homepage component:

import React from 'react'
import './homepage.css'
import {useState,useEffect} from 'react'
const Homepage = (props) => {
    const [user,setUser]=useState("");
    function setUserName()
    {
        const {username,setusername}=props;
        setusername(user);
    }
  return (
    <div>
        <div className="panel">
            <div className="pricing-plan">
                <img src="../images/girly.gif" className="logo" alt=""/>
                <ul className="pricing-features">
                    <h1 className="greetname">Hi, I'm Sam</h1>
                    <li className="pricing-features-item1">What's your name?</li>
                    <input className="pricing-features-item2" name="username" value={user} onChange={(e)=>setUser(e.target.value)}
                        placeholder="A nickname you prefer..."></input>
                </ul>

                <button className="pricing-button" onClick={()=>setUserName()}>Enter</button>
            </div>
        </div>
    </div>
  )
}

export default Homepage

App component

import './App.css';
import Navbar from './components/Navbar';
import Footer from './components/Footer';
import Homepage from './Pages/Homepage';
import Mainpage from './Pages/Mainpage'
import {BrowserRouter as Router,Routes,Route} from 'react-router-dom'
import {useState,useEffect} from 'react'
function App() {
  const [userName,setUserName]=useState(null);
  return (
    <div className="App">
      <Navbar/>
      <Routes>
        <Route path='/' exact element={<Homepage username={userName} setusername={setUserName()} />}></Route>
        <Route path='/home' exact element={<Homepage/>}></Route>
        <Route path='/mainpage' exact element={<Mainpage/>}></Route>
      </Routes>
      <Footer/>
    </div>
  );
}

export default App;