The provided `as` value is incompatible with the `href` value error in next.js

I have three pages

1. home/start which navigates to
2. home/users/[type] which navigates to
3. home/settings/[type].

home/start

import { useRouter } from 'next/router';
const Start = () => {
  const router = useRouter();
  return (
    <>
      <button
        onClick={() => {
          router.push('/home/users/native');
        }}
      >
        GO
      </button>
    </>
  );
};

export default Start;

home/users/[type]

import { useRouter } from 'next/router';

const User = () => {
  const router = useRouter();
  return (
    <>
      <button
        onClick={() => {
          router.push('/home/settings/subscription');
        }}
      >
        Go Again
      </button>
    </>
  );
};

export default User;

home/settings/type

const Settings = () => {
  return <div>Confirm docs</div>;
};

export default Settings;

I navigate from home/start to /home/users/native by clicking on the button, then to /home/settings/subscription.Then, I click on the back button to go back to home/users/native.Now, when I click on forward button to get to home/settings/subscription, I get the following error

Error: The provided as value (/home/settings/subscription) is incompatible with the href value (/[type]).

I am not using as anywhere.Can someone point out as to what I am doing wrong?