Flip camera ReactJs PWA

I'm a newbie web developper actually doing an internship in a company. My work is to build a PWA with NextJS which is gonna be a mobile app. I have to get access to phone camera, which i can do with GetUserMedia, but i'm trying to assigned a function to a button i had created to switch to front and back camera of the device. And nothing happens...

Here is a sample of my code, if you can please help me ^^. Thanks a lot !

import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked'
import { Fab, IconButton } from '@mui/material'
import { useRouter } from 'next/router'
import FlipCameraAndroidIcon from '@mui/icons-material/FlipCameraAndroid'

let front = false

const constraints = {
  video: {
    width: { min: 1024, ideal: 1920, max: 2560 },
    height: { min: 720, ideal: 1080, max: 1440 },
    aspectRatio: { ideal: 1.7777777777777777 },
    facingMode: (front ? 'environment' : 'user')
  },
  audio: false
}

export default function TakePhoto () {
  const videoRef = useRef(null)
  const photoRef = useRef(null)
  const router = useRouter()
  const [hasPhoto, setHasPhoto] = useState(false)

  const getVideo = () => {
    navigator
      .mediaDevices
      .getUserMedia(constraints)
      .then(mediaStream => {
        const video = videoRef.current
        video.srcObject = mediaStream
        video.play()
      })
      .catch(err => {
        console.error(err)
      })
  }

  /*  function flipCamera () {
    const flip = constraints.video.facingMode === 'environment' ? 'user' : 'environment'
    getVideo(flip)
  } */

  function takePicture () {
    const width = constraints.video.width.max || constraints.video.width.ideal || constraints.video.width.min
    const height = constraints.video.height.max || constraints.video.height.ideal || constraints.video.height.min

    const video = videoRef.current
    const photo = photoRef.current

    photo.width = width
    photo.height = height

    const ctx = photo.getContext('2d')
    ctx.drawImage(video, 0, 0, width, height)
    setHasPhoto(false)
    localStorage.setItem('photo', photo.toDataURL('image/jpeg', 1.0))
    router.push('/app/event/12345678/confirm-photo')
  }

  useEffect(() => {
    getVideo()
  }, [videoRef])

  return (
    <>

      <div className='camera' >

        <video ref={videoRef} style={{ width: '100%', maxWidth: '100%', height: 'auto', objectFit: 'cover' }}>
        </video>

        <Fab sx={{ position: 'absolute', bottom: '50px', left: '42%', backgroundColor: 'red' }} onClick={takePicture}>
          <RadioButtonUncheckedIcon fontSize='large'/>
        </Fab>

      </div>

      <IconButton sx={{ position: 'absolute', bottom: '30px', left: '80%', backgroundColor: 'red' }} onClick={function () { front = !front }}>
          <FlipCameraAndroidIcon fontSize='medium'/>
      </IconButton>

      <div className={'result ' + (hasPhoto ? 'hasPhoto' : '')}>
        <canvas ref={photoRef} style={{ width: '100%', height: 'auto' }}></canvas>

      </div>

    </>
  )
}