Nextjs router.push with anchor does not work

Question

Do anyone have an idea of why adding an anchor does not necessary work ?

I have a page /contracts with a list of items. Within each item (div) I put an unique ID (example: <div id="contract-3929 />)

If I click on one item it redirects in a page detail /contracts/detail of this item, and then I have a left arrow "back" which is suppose to make me come back to the /contracts page with the list of items! I want to be able to scroll until the concerned item (contract) ! So from detail page when I click on back button here is the code :

const router = useRouter();
const goBackPage = () => {
    router.push(
      `/contracts#contract-${contract_id}`
    );
  };

For the record I have done exactly the same thing on another page and it works perfectly ! I also tried with scroll:false but still not working here.

router.push(
      `/contracts#contract-${contract_id}`,
      undefined,
      { scroll: false }
    );

So I am wondering if this is the good way of doing it ? Thx a lot