Inertia / Phoenix lazy data and partial reload on select dropdown values

Example.tsx

import { useState } from "react";
import { router } from "@inertiajs/react";

interface selectOptionValuesType {
  value: string;
  label: string;
}
export default function Example({ selectOptionValues } : { selectOptionValues: selectOptionValuesType[] | null }) {
  const [showDropdown, setShowDropdown] = useState(false);

  const handleCheckboxChange = () => {
    setShowDropdown(!showDropdown);
    router.reload({ only: ['selectOptionValues'] });
  };

  console.log("selectOptionValues", selectOptionValues);
  return (
    <>
      <div>
        <p>selectOptionValues prop value</p>
        <code>
          {JSON.stringify(selectOptionValues) || "No options available"}
        </code>
      </div>
      <br />
      <div>
        <input type="checkbox" onClick={handleCheckboxChange}/>
        <label>Show select dropdown</label>
      </div>
      {showDropdown && (
        <div>
          <select>
            {(selectOptionValues || []).map((option: selectOptionValuesType, index: number) => (
              <option key={index} value={option.value}>
                {option.label}
              </option>
            ))}
          </select>
        </div>
      )}
    </>
  );
}

page_controller.ex

defmodule ExampleWeb.PageController do
  use ExampleWeb, :controller

  def example(conn, _params) do
    conn
    |> assign(:page_title, "Example")
    |> assign_prop(
      :selectOptionValues,
      inertia_optional(fn ->
        [
          %{
            label: "Option 1",
            value: "1"
          },
          %{
            label: "Option 2",
            value: "2"
          },
          %{
            label: "Option 3",
            value: "3"
          }
        ]
      end)
    )
    |> render_inertia("Example")
  end
end