Компонент React обновляет данные только после перезагрузки страницы. При нажатии на Navlink меняется Url, но не меняются данные в компоненте

При нажатии на Navlink в первый раз данные показываются, при нажатии на другой Navlink данные остаются такими же, но url меняется, обновив страницу он выводит новые нужные данные.

    function App() {
return (
    <div className="App">
        <div className="Navbar">
            <Header/>
            <div className="NavbarItem">
                <ProfessionListContainer/>
            </div>
        </div>
        <div className="Containers">
            <Routes>
                <Route index element ={<Form />}/>
                <Route path={'profession/:id'} element={<ProfessionEditContainer/>}/>
            </Routes>
        </div>
    </div>
  );
}

ProfessionListContainer делает запросы и возвращает ProfessionList, который делает map Profession (через который и нажимается NavLink)

const Profession = (props) => {

return(
        <NavLink key={props.id} to={`/profession/`+ props.id}  className="Profession" >{props.name}</NavLink>
)
}

ProfessionEditContainer вызывает запросы и возвращает ProfessionEdit

const ProfessionEditContainer = () => {

const [ProfState, setProfState] = useState();
const [NameState, setNameState] = useState();

const { id } = useParams();

useEffect(() => {
    fetchName(id)
    fetchContent(id)
}, [setNameState]);

 function fetchName(id){
    const name =  ProfService.getNameById(id)
    setNameState(name)
}

 function fetchContent(id){
    const content =  ProfService.getContentById(id)
    setProfState(content)
}

if (NameState){
    return(
            <ProfessionEdit prof={ProfState} names={NameState}/>
    )
}else {
    return(
        <img className={s.Load} src={"https://usagif.com/wp-content/uploads/loading-96.gif"} />
    ) ;
}
}

ProfessionEdit в консоли выводит данные.