Why is the DOM not updating with state change in ReactJS?

If you replace defaultValue with the value prop, and update your <label> elements style as shown below, then your component will work as expected:

function App() {
  const [slider, setSlider] = useState(20);

  const handleChange = (e) => {
    setSlider( e.target.value );
    console.log(slider);
  }

  return (<div className="container">
        {/* Format valid value for fontSize property */ }
        <label style={{ fontSize: `${slider}px` }}>Example range</label>

        {/* Supply slider state via value prop rather than defaultValue */ }
        <input 
          type="range" 
          className="custom-range" 
          id="customRange1"
          min="10" 
          max="30"
          value={slider}
          onChange={handleChange}
        /> 
    </div>
  );
}

See this link for relevant documentation discussing form/inputs elements that have a value prop specified (referred to as "Controlled components")

You miss the unit here,

<label style={ { fontSize: `${slider}px` } }>Example range</label>

Demo