HOF issue

[swapnesh839]

const AppLayout = () => (Wrapper) => {
return (props) => {
const { chatId } = useParams();
return <>
<Title />

<Grid container height={"calc(100vh - 4rem)"}>
<Grid item sm={4} md={3} sx={{ display: { xs: "none", sm: "block" } }} height={"100%"} >
<Chatlist
chatId={chatId}
onLineUsers={[1, 2, 3]}
newMessagesAlert={[{ chatId: 1, count: 4 }]}
Chats={samplechat} />

<Grid item xs={12} sm={8} md={5} lg={6} height={"100%"} >
<Wrapper {...props} />

<Grid item sm={4} md={3} sx={{ display: { xs: "none", md: "block" } }} height={"100%"} >

</>
}
}

showing error

React Hook "useParams" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function.eslintreact-hooks/rules-of-hooks
Codeium: Explain Problem

(alias) useParams(): Readonly<Params>
import { useParams } from 'react-router-dom'
Returns an object of key/value pairs of the dynamic params from the current URL that were matched by the route path.

@see — https://reactrouter.com/hooks/use-params

how to fix this ?