Making changes in Firefox print does not work , but works well in other browsers

I am trying to modify some content for print alone, and so have a hook

import { useState } from 'react'

const usePrint = () => {
    const [isPrinting, setIsPrinting] = useState(false)
    const handleBeforePrint = () => {
        setIsPrinting(true)
    }
    const handleAfterPrint = () => {
        setIsPrinting(false)
    }

    typeof window !== 'undefined' && window.addEventListener('beforeprint', handleBeforePrint)
    typeof window !== 'undefined' && window.addEventListener('afterprint', handleAfterPrint)

    return isPrinting
}

export default usePrint

In the code I check the usePrint Value and display content accordingly

const testVar = usePrint ? 'It is Printing' : 'It is not printing'

While displaying testVar, it works well in chrome, with ‘It is printing’ getting displayed in print preview. But this does not work in Firefox. How can we get this to work in firefox