React Router useParams returns undefined

I’m trying to just print the topicId which is extracted from the URL. But whenever I attempt to do this, it is returned as undefined. What am I doing wrong in this code?

import React, {useState, useEffect, useRef, useLayoutEffect} from 'react';
import { Route, Switch, useRouteMatch, useParams} from 'react-router-dom';

function Review():JSX.Element {
  const match = useRouteMatch()

  function Topic(){
    let {topicId} = useParams<{topicId:any}>()
    console.log(topicId)
    return <>The topic is... {topicId}</>
  }
  return(
    <Switch>
      <Route path={`${match.path}/:topicId`}>
        {Topic()}
      </Route>
    </Switch>
  )
}

export default Review;

Answer

You need to add Topic as a component not as a function inside Route:

 <Route path={`${match.path}/:topicId`}>
        <Topic/> // <--- Change here
  </Route>

Please have a look at this documentation: https://reactrouter.com/web/api/Hooks/useparams