Как я могу динамически обновлять значение React Helmet при изменении состояния

Я хочу динамически обновлять значение React Helmet, я пробовал это с состоянием, но всякий раз, когда я меняю страницы, оно не будет обновляться, вместо этого значение показывает более старое значение Я хочу добавить метатег для SEO, канонический тег, и каждая страница изменяется. Я хочу ее обновить, но когда я перезагружаю страницу, она обновляется, но не на странице изменяется с помощью React Router.

function App() {
 
  const location = useLocation();
  const [canonical, setCanonical] = useState(window.location.href);

  useEffect(() => {
    setCanonical(window.location.href);
  }, [location]);

  return (
    <div className = "App">
      <Helmet>
       
        <link rel = "canonical" href = {canonical} />
      </Helmet>
  

I tried with the following code present in my App.js file  I want to update it the canonical value when the state changes

🤔 А знаете ли вы, что...
React использует язык JavaScript для разработки компонентов пользовательского интерфейса.