useResponsiveValue: Fires a side effect on dependency change

The useResponsiveValue hook does not update the value if one of the dependencies changes.
Internationalisation is a good example for this situation.

packages/atomic-layout/src/hooks/useResponsiveValue.ts

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { withBreakpoints } from '@atomic-layout/core'
 import useBreakpointChange from './useBreakpointChange'
 
@@ -13,10 +13,14 @@ const useResponsiveValue = <ValueType>(
 ): ValueType => {
   const [value, setValue] = useState<ValueType>(defaultValue)
 
-  useBreakpointChange(() => {
+  const callback = () => {
     const nextValue = withBreakpoints<ValueType>(breakpoints, defaultValue)
     setValue(nextValue)
-  })
+  }
+
+  useEffect(callback, [breakpoints, defaultValue])
+
+  useBreakpointChange(callback)
 
   return value
 }