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}>()
    return <>The topic is... {topicId}</>
      <Route path={`${match.path}/:topicId`}>

export default Review;


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

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

Please have a look at this documentation: