rehooks/local-storage with react js

[mikica6]

Hi,
I start to use rehooks/local-storage and I try to write to local storage using writeStorage but I get this error:

TypeError: Failed to construct 'CustomEvent': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

react-dom.development.js:327 Uncaught TypeError: Failed to construct 'CustomEvent': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
at new LocalStorageChanged (local-storage-events.ts:44)
at writeStorage (local-storage-events.ts:77)
at onButtonClick (odabir-tvrtke.js:41)
at handleClick (button.js:200)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
at executeDispatch (react-dom.development.js:389)
at executeDispatchesInOrder (react-dom.development.js:411)
at executeDispatchesAndRelease (react-dom.development.js:3278)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287)
at forEachAccumulated (react-dom.development.js:3259)
at runEventsInBatch (react-dom.development.js:3304)
at runExtractedPluginEventsInBatch (react-dom.development.js:3514)
at handleTopLevel (react-dom.development.js:3558)
at batchedEventUpdates$1 (react-dom.development.js:21871)
at batchedEventUpdates (react-dom.development.js:795)
at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
at attemptToDispatchEvent (react-dom.development.js:4267)
at dispatchEvent (react-dom.development.js:4189)
at unstable_runWithPriority (scheduler.development.js:653)
at runWithPriority$1 (react-dom.development.js:11039)
at discreteUpdates$1 (react-dom.development.js:21887)
at discreteUpdates (react-dom.development.js:806)
at dispatchDiscreteEvent (react-dom.development.js:4168)

This is my code:
import React, {useState, useEffect} from 'react';
import {Select, Button} from 'antd';
import { Link } from 'react-router-dom';
import { useLocalStorage, writeStorage } from '@rehooks/local-storage';

const CompanyPicker = (companies) => {
const [id, setId] = useState('');

const handleCompanySelect = (e) => {
    setId(e);
}
const onButtonClick = () => {
    writeStorage('id', id);
}
return (
   <div>
            <Select onSelect={handleCompanySelect}>
                {
                    companies.map((company, index) => (
                        <Option
                            key={index}
                            value={company.id}
                        >{`${company.name}`}</Option>
                    ))
                }
            </Select>
            <Link to={{
                pathname: "/dashboard",
                }}>
                <Button onClick={onButtonClick}>Go!</Button>
            </Link>
        </div>
);

}
export default CompanyPicker;

I even try to revert back to 2.4.0 and it is not working

Any ideas how I can fix it?
P.S Thanks for package

[strarsis]

@iamsolankiamit, @jharrilim: +1. Same issue.

[Darren Furr]

FYI - I encountered this as well with v2.4.0. I updated to v2.4.4 & it works

[Amit Solanki]

as @darrenfurr said, updating the library should fix the bug.