Uncaught TypeError: Cannot read properties of undefined (reading 'map')

Hello, I tried to create a dropdown menu containing data from my database table, but I'm always getting etalaseData: undefined in the console. I'm currently using Laravel Inertia with React JS as my frontend.

Here is my code on the "TambahProduk.jsx"

// ... (other imports)

export default function TambahProduk({ auth, etalaseData }) {
    const { user } = auth;

    // ... (rest of your code)

    return (
        // ... (rest of your code)

        <div className="form-group">
            <label>Etalase</label>
            <select
                className="form-control select2bs4"
                style={{ width: "100%" }}
            >
                {/* Map over etalaseData to create options */}
                {etalaseData.map((etalase) => (
                    <option key={etalase.id} value={etalase.id}>
                        {etalase.name}
                    </option>
                ))}
            </select>
        </div>

        // ... (rest of your code)
    );
}

And here is my "ProdukController.php" code:

use Illuminate\Support\Facades\Validator;
use App\Models\Produk;
use App\Models\Etalase;
use Inertia\Inertia;

class ProdukController extends Controller
{   
    public function index()
    {
        // Fetch the data from your database
        $produkData = Produk::all();

        // Return the data to the Inertia page component
        return inertia('Produk', [
            'produkData' => $produkData,
        ]);
    }

    public function tambahProduk()
    {
        // Fetch data from Etalase
        $etalaseData = Etalase::all();

        // Return the etalase data to the Inertia page component
        return inertia('TambahProduk', [
            'etalaseData' => $etalaseData,
        ]);
    }
}

How do I resolve this problem?