Inertia JS - Saving menu position when clicking LINK

Hi, I have this menu which I want to preserve the state when the user clicks the link, such that the user will open a sub menu, and when a Link inside that sub menu is clicked, then the sub menu position is saved for the next page and doesn't close.

<div className="w-full min-h-full bg-gray-300">
            <ul className="p-4 hidden md:block">
                <img onClick={() => toggleOpenAll()} className={`w-8 ml-auto ${allOpen ? 'rotate-0' : 'rotate-180'} transition-transform`} src="/icons/icons8-collapse-arrow-64.png" />
                {
                    sidebarLinks.map((x, i) => (
                        <li key={i} onClick={() => toggleOpenItem(i)}>
                            <div className="flex flex-column font-bold">
                                <div className="">{x.name}</div>
                                <div className={`ml-4 ${x.open && 'rotate-180'}`}>
                                    {x.src && '↓'}
                                </div>
                            </div>
                            {x.links && x.links.length > 0 ? (
                                <ul className={`${x.open == false ? 'hidden scale-y-0' : 'block scale-y-100 origin-top my-2 transition-all'}`}>
                                    {x.links.map((y, j) => (
                                        <li key={j} className="text-sm ml-2 hover:underline hover:translate-x-3 transition-transform">
                                            <Link preserveScroll href={y.url}>
                                                {y.name}
                                            </Link>
                                        </li>
                                    ))}
                                </ul>
                            ) : null}
                        </li>
                    ))
                }
            </ul>
        </div>