Refactoring a large React component of 2,671 line of code

I would like to refactor a very nasty page I built 2 years ago, here is pseudo code

// imports section
import 20libraries;

// 25 global variables, including 8 vars for measuring time using setInterval()

export default class VideoRecorder extends PureComponent {
  state = {
    // 40 lines
    client: Bowser.parse(window.navigator.userAgent)
  }
  
  componentDidMount() { // initializing permissions, MediaRecorder and SpeechRecognition
    if (client == 'android') {
      // android logic
    } else if (client == 'iOS') {
      // iphone logic
    } else {
      // desktop logic
    }
  }

  // 30 functions for desktop logic, largest has 243 lines
  // 20 functions for mobile logic

  render() {
    if (client == 'android') {
      // android logic
    } else if (client == 'iOS') {
      // iphone logic
    } else {
      // desktop logic
    }
  }
}

This file has 2,671 line of code, so you can imagine maintainability and overall ugliness of this creature
How would you start with refactoring that mobile/desktop logic, i.e. splitting into separate components?

Also I had to count seconds for recording and managed to do it using setInterval() which is not very CPU-friendly. Are there any other ways of robust counting of seconds client-side?