Storing useState hooks in a common object not working - reactjs

Question

Attempting to organize application hooks in one object:
Minimal, Complete, Verifiable Example
Instead of this:
export default function App() {
const [count1, setCount1] = useState(0)
const [count2, setCount2] = useState(0)
// Usage:
setCount1(17)
console.log(count1)
//-> 17
...this:
export default function App() {
let hook = {
"count1": {
"set": "",
"n": 0
},
"count2": {
"set": "",
"n": 0
}
}
}
const [hook.count1.n, hook.count1.set] = useState(0)
const [hook.count2.n, hook.count2.set] = useState(0)
Also tried this way, but no luck:
const [hook.count1['n'], hook.count1['set'] = useState(0)
const [hook.count2['n'], hook.count2['set'] = useState(0)
Intended to be used like this:
// Usage:
hook.count2.set(17)
console.log(hook.count2.n)
// Expected 17, but...
No luck :( throws this error:
Unexpected token, expected "," (16,13)
(Which is the "." between hook and count1)
Why can't I aggregate hook states and setters as object properties and methods? Ty Keith :^)

Answer 1

The useState hook should return an array consisting of the value at index 0 and setter function at index 1. So what is usually done is to desestructuring the array into 2 other variables, those which we give the names we want. Your problem is not with the hook itself, it is with the array desestructuring, it does not allow, as far as I know, for you to desestructure an array into object attributes. If you try something like the following at the browser console you'll see it won't work either.
const t = [1, () => {}]
const obj = {n: 0, s: null}
const [obj.n, obj.s] = t
You'll see an error happens with the message: Uncaught SyntaxError: Illegal property in declaration context.
So to sum up, javascript syntax does not allow you to do it, as far as I know.

Answer 2

I'm having trouble understanding what the intention is behind your approach of assigning the value and setter to the hooks object. My suggestion would be to use an object that holds all the counts with a single useState instance.
Does something like this work? If not can you elaborate more on why you need to use an approach similar to what you described?
export default function App() {
const [counters, setCouters] = useState({ count1: 0, count2: 0 })
// usage
setCounters({ ...counters, count1: 1 })
// ...
return null
}
Alternatively, you could do something like this if you really want it to be an object for some reason:
export default function App() {
const hooks = {
count1: {},
count2: {},
}
const [count1, setCount1] = React.useState(0)
const [count2, setCount2] = React.useState(0)
hooks.count1.n = count1
hooks.count1.set = setCount1
hooks.count2.n = count2
hooks.count2.set = setCount2
// ...
return null
}