Make text field empty by default – Javascript

On my site, I’d like to implement a filter that allows users to filter an event based on their range. For example: there are many videos in the database (short videos or short films or feature films). I would like that the user in the field could type, for example, in the "from" field – the number 60, and in the "to" field – the number 120, and he was given films lasting from 60 to 120 minutes.

I already have certain developments. I implemented the input field using TextField. I also made restrictions on the number of characters entered (the number entered cannot be more than seven characters).

But I have a problem that by default in these fields is zero (and also zero appears after the user deletes the previously entered value). Please tell me how can I make the field empty by default.

    const MAX_DURATION = 9999999

export default function Duration() {
  const { filters, setFilters } = useContext(PageContext);
  const [minDuration, setMinDuration] = useState(filters.durationRange.start);
  const [maxDuration, setMaxDuration] = useState(filters.durationRange.end);

  useEffect(() => {
    setMinDuration(filters.durationRange.start);
    setMaxDuration(filters.durationRange.end);
  },
    [filters.durationRange.start, filters.durationRange.end]);

  useEffect(() => {
    var updatedFilters = { ...filters }
    updatedFilters.durationRange = { start: minDuration, end: maxDuration }
    setFilters(updatedFilters)
  }, [minDuration, maxDuration]);


  return (
      <div>
        <div>
          <TextField
            label="From"
            value={minDuration}
            onInput={(e) => {
              e.target.value = Math.max(e.target.value).toString().slice(0, 7)
              const newValue = Number(e.target.value)
              if (newValue) {
                setMinDuration(newValue)
              } else if (newValue == 0) {
                setMinDuration(0)
              }
            }}
          />
        </div>

        <div>
          <TextField
            label="To"
            value={maxDuration}
            onInput={(e) => {
              e.target.value = Math.max(e.target.value).toString().slice(0, 7)
              const newValue = Number(e.target.value)
              if (newValue) {
                setMaxDuration(newValue)
              } else if (newValue === 0) {
                setMaxDuration(0)
              }
              else setMaxDuration(MAX_DURATION)
            }}
          />
        </div>

      </div>
  );
}