When trying to access the props.prevUrl property, the following error is encountered: Property 'prevUrl' does not exist on type '{ nextUrl: string; } | { prevUrl: string; nextUrl: string; } | { prevUrl: string; confirm: () => void; }'. How can this be resolved?
function NavigationButtons({
variant,
...props
}:
| {
variant: 'first';
nextUrl: string;
}
| { variant: 'middle'; prevUrl: string; nextUrl: string }
| { variant: 'last'; prevUrl: string; confirm: () => void }) {
return (
<nav
className={`fixed bottom-0 left-0 right-0 flex bg-neutral-white p-4 ${
variant === 'first' && 'justify-end'
} lg:static lg:mt-auto`}
>
{(variant === 'middle' || variant === 'last') && (
<Link href={props.prevUrl}>
<button>Go Back</button>
</Link>
)}
{(variant === 'first' || variant === 'middle') && (
<button className='rounded bg-primary-marine-blue px-4 py-2 text-neutral-alabaster'>
Next Step
</button>
)}
{variant === 'last' && <button>Confirm</button>}
</nav>
);
}