Can't turn off green light and the red icon in the browser when toggling enabled tracks in Mediastream

I'm attempting to toggle a video track in a mediastream in React:

navigator.mediaDevices
    .getUserMedia({ video: !isVideoOn, audio: isAudioOn })
    .then((stream) => {
      videoEl.current.srcObject = stream;
      setIsVideoOn(!isVideoOn); // toggle boolean for video state
      videoEl.current.onloadedmetadata = () => {
        videoEl.current.play();
      };
    }

The reason I'm using .getUserMedia in the code above, is because I want to turn off the green light in the laptop camera and change the red camera icon in the browser to just microphone when the video is turned off. But I can't get it to work like that right now. The video in the browser toggles, but the green light stays on and the red icon remains the same.

I've tried toggling the video track using .getVideoTrack() and changing the enabled value, but it is behaving the same, it is toggling the video in the browser while the green light stays on and the red icon remains the same, same as what I described earlier.

However, according to MDN in the Usage Notes, the light is supposed to turn off when the enabled value is false.

Usage notes

If the MediaStreamTrack represents the video input from a camera, disabling the track by setting enabled to false also updates device activity indicators to show that the camera is not currently recording or streaming. For example, the green "in use" light next to the camera in iMac and MacBook computers turns off while the track is muted in this way.

What am I missing?