Bug Report: toPx() returns wrong values during react render cycle

[SeanPercy]

I tried to use your package in my React app and stumbled upon following:
I have an breakpoints object/map which contains keys like sm lg and string values such as 36rem and 62rem

const App = () => {
...
  console.log('LG', breakpoints.lg);
  console.log(toPX(breakpoints.lg));
  console.log(toPX('rem'));
  console.log('_________________');
...
return ( ... );
}

Upon mounting, the Compoment goes through several render cycles while generating the following output:

LG 62rem
992
16
_________________
LG 62rem
992
16
_________________
LG 62rem
992
16
_________________
LG 62rem
992
16
_________________
LG 62rem
992
16
_________________
LG 62rem
868
14
_________________

As you can see, toPX() returns the right result during each render, except for the very last one.

It got even more confusing, when I tried the following:

const App = () => {
...
  console.log('ch', toPX('ch'));
  console.log('em', toPX('em'));
  console.log('px', toPX('px'));
  console.log('_________________');
...
return ( ... );
}

which generated this output:

ch 8.8984375
em 16
px 1
 _________________
ch 8.8984375
em 16
px 1
_________________
ch 9.599921875
em 16
px 1
 _________________
ch 9.599921875
em 16
px 1
_________________
ch 9.599921875
em 16
px 1
_________________
ch 8.4
em 14
px 1
_________________

I ended up copying all the code of your index.js file directly to my project and it worked as intended.