title: Properly mocking useParams hook in jest
body: <p>I am trying to mock the useParams hook in jest and try to make it dynamic so I can mock it a few times. However, I can only mock it if I hardcode the value. Here's what I got so far:</p>
  <pre><code>const mockedUsedNavigate = jest.fn();
  
  jest.mock('react-router-dom', () =&gt; ({
    ...jest.requireActual('react-router-dom'), // use actual for all non-hook parts
    useNavigate: () =&gt; mockedUsedNavigate,
    useParams: () =&gt; ({
      hash: '123',
    }),
  }));
  </code></pre>
  <p>This works because I am hardcoding the useParam to return a <code>{ hash: '123' }</code> object.
  However, if I try to mock this, it won't work:</p>
  <pre><code>const mockedUsedNavigate = jest.fn();
  
  jest.mock('react-router-dom', () =&gt; ({
    ...jest.requireActual('react-router-dom'), // use actual for all non-hook parts
    useNavigate: () =&gt; mockedUsedNavigate,
    useParams: () =&gt; jest.fn().mockReturnValue({ hash: '123' })
  }));
  </code></pre>
  <p>If I do that, my component will receive an empty value and the value wont be mocked the way I want:</p>
  <pre><code>  const { hash = '' } = useParams&lt;{ hash: string }&gt;();
    console.log('hash: ', hash); ---&gt; ''
  </code></pre>
  <p>So I'm not sure what I'm doing wrong... Can anybody point me to the right direction?</p>