First time posting here. I'm a newer developer, and I'm working on building a navigation system using a series of 4 select-option menus, and each time you select a previous one it enables the following drop down list.

World Wide | MDC | Shelf | Unit

...............................................................

New Jersey.... 10..........12....... 42

Ohio................. 08........ 34.........23

On "World Wide", the MDC, Shelf, and Unit drop downs are disabled. If you pick from locations, like New Jersey then it opens up the MDC list, and once one of those is picked the shelf menu is unlocked and so on... Well so far, everything seems functional, except for when I go back to picking a different location like "Ohio". I want the MDC drop down list to default back to "MDC", and the other drop downs to disable (this part works). However, the MDC will stay on the value selected there, and as the list is loaded dynamically it doesn't always sync and it just looks like trash.

Here is the code for the first two select menu items Location and MDCs.

<select name="site" id="site" onChange={selectSiteHandler}>
        <option value="00" defaultValue>
          World Wide
        </option>
        {jobSites && jobSites.map((site, key) => {
          return <option value={site.physical_site_name} key={key + 1}>{site.physical_site_name} - 10</option>
        })}
      </select>
      <select
        name="mdc"
        id="mdc"
        onChange={selectMdcHandler}
        disabled={mdcDisabled}
      ><option value="00" defaultValue>
      {mdcDefaultVal}
    </option>
        {!mdcDisabled && dropdownFormatter(assetList, "mdc", site).map((mdc, key) => {
          return <option value={mdc} key={key + 1}>MDC {mdc}</option>
        })}
      </select>

I've tried changing the mcdDefaultVal to no avail.