Why remote library works but local library throws error? - reactjs

Question

I am building a component library, and install it as a local package, but it throws an error when I use react Hooks.
import React from "react";
import { useSelector } from "react-redux";
export default function Info() {
const name = useSelector((state) => state.account.name);
return (
<>
<ul>
<li>name: {name}</li>
</ul>
</>
);
}
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
Then I upload this component library to remote, install it again, it solved.
But I still didn't know why...
Could anyone explain it?
My package.json
{
"name": "package",
"version": "0.1.0",
"private": true,
"main": "dist/index.js",
"babel": {
"presets": [
[
"react-app"
]
]
},
"dependencies": {},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"compile": "rm -rf dist && mkdir dist && cross-env NODE_ENV=development babel ./src/components -d dist --copy-files"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/cli": "^7.12.0",
"cross-env": "^7.0.2",
"react-redux": "^7.2.1",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-scripts": "3.4.3",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2"
},
}
Is there any difference behavior between the local package and remote package?
I read many articles, I guess it might be the multiple instances of React.
But why remote package wouldn't have this problem?
Articles I read:
Hooks + multiple instances of React #13991
Invalid Hook Call Warning

Answer 1

remove the brackets
const name = useSelector(state => state.account.name);

Answer 2

Add curly braces, and remove name in the end.. as you are trying to destructure the state.
const { name } = useSelector((state) => state.account);