Show a default value in a dropdown if no option is selected from it

[VedantSG123]

allowEmpty not working properly A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] I want to restrict the user from setting the cron value to '*' in a particular dropdown.

Current Behaviour: If the user deselects all the values from the dropdown, it sets the value of that dropdown to '*'

https://github.com/xrutayisire/react-js-cron/assets/103552663/4c2b179b-279a-47c8-9798-6edacf7afff2

I don't want the value to become * when user deselects all the values from the hour dropdown, instead set it to some default value (not *).

Here is what I tried to do:

export const CronForWeekly = () => {
  const [value, setValue] = React.useState('0 12 * * 7');

  const filterExpr = (value: string) => {
    const exprArray = value.split(' ');
    const hourIndex = 1;

    if (exprArray[hourIndex] === '*') {
      exprArray[hourIndex] = '12';
    }

    setValue(exprArray.join(' '));
  };

  return (
    <div className='flex flex-col gap-4'>
      <div></div>
      <h3>Cron Value</h3>
      <div>{value}</div>
      <Cron
        value={value}
        setValue={filterExpr}
        clearButton={false}
        mode='single'
        defaultPeriod='week'
        allowedDropdowns={['hours', 'minutes', 'week-days']}
        clockFormat='12-hour-clock'
        allowClear={false}
        allowEmpty='never'
      />
    </div>
  );
};

But is not working properly, here is the attached screen record:

Screencast from 2024-06-27 10-56-27.webm

When I click on the default value itself, the expression is fine, but the change dosen't reflect on the drop-down, it still shows every hour in the dropdown