App.js

const user = useRecoilValue(userAtom)

<Route path="/:username" element={
    user ? (
       <>
       <UserPage />
       <CreatePost />  
       </>
    ) : (
       <UserPage />
    )
} />

In both components UserPage and CreatePost, I am using the same parameter to pass in the url const { username } = useParams() and in CreatePost I tried to log the value of username got undefined and I do not know why? Supposedly I passed the URL parameter it should be able to read the value so are there any solutions to fix the problem?

I used the correct format for URL params but the value got undefined and do not know the reason