how to listen to --safe-area-inset-bottom env changes

Question

I want to write a hook which returns the latest --safe-area-inset-bottom value.

const safeAreaInsetBottom = useSafeAreaInsetBottom();

the first value is easy to get. Something like the following will do:

getComputedStyle(document.documentElement).getPropertyValue('--safe-area-inset-bottom')

but this would not consider future changes of the viewport (i.e. a mobile screen changing from portrait to landscape). I was wondering what would be the best way to achieve this (listeners, mutation observers etc..)