Simple Dropdown component not taking the initial default

[kawoolutions]

Hello.

I'm quite new to React, so beware.

I am trying to build a simple dropdown representing sports seasons:

import { useState } from "react";

import { Dropdown, DropdownProps } from "primereact/dropdown";

interface Season {
    id: number
    pk: number
    startYear: number
}

export default function SeasonSwitcher() {
    const [seasons, setSeasons] = useState<Season[]>([
        {
            "startYear": 2001,
            "id": 2001,
            "pk": 2001
        },
        {
            "startYear": 2002,
            "id": 2002,
            "pk": 2002
        },
        {
            "startYear": 2003,
            "id": 2003,
            "pk": 2003
        },
        {
            "startYear": 2019,
            "id": 2019,
            "pk": 2019
        }
    ]);
    const [selectedSeason, setSelectedSeason] = useState<Season>({
        "startYear": 2019,
        "id": 2019,
        "pk": 2019
    });
    
    const selectableSeasonsTemplate = (season: Season) => {
        return (
            <>
                {"Season"} {season.startYear}/{(season.startYear + 1).toString().substring(2)}
            </>
        );
    }
    
    const selectedSeasonTemplate = (season: Season, props: DropdownProps) => {
        console.log("selectedSeasonTemplate: " + season);
        if (season) {
            return (
                <>
                {"Season"} {season.startYear}/{(season.startYear + 1).toString().substring(2)}
                </>
            );
        }
        return (
            <span>
                {props.placeholder}
            </span>
        );
    }
    
    console.log("Selected season: " + selectedSeason + ", JSON = " + JSON.stringify((selectedSeason)));
    if (!seasons) {
        return "Loading seasons...";
    } 
    if (!selectedSeason) {
        return "Loading selected season...";
    } 
    return (
        <Dropdown
            options={seasons}
            optionValue="id"
            optionLabel="startYear"
            value={selectedSeason}
            onChange={(e) => setSelectedSeason(e.value)}
            placeholder="No season selected"
            itemTemplate={selectableSeasonsTemplate}
            valueTemplate={selectedSeasonTemplate}/>
    );
}

However, the initial/default season is not selected when reloading the page:

It initially shows "No season selected", but this should not be possible at all. A season must be selected.

What's wrong? How do I fix this?

Thanks

[KirilCycle]

Hello, since you want to store the entire object in the 'selectedSeason' state, there is no need to maintain the 'optionValue' property in 'Dropdown' component.