Checkbox doesn't change after clicking React - node.js

Question

I need to update options so that later useCallback will process it, but when I click on the checkbox, nothing changes.
But if you comment out setOptions, then the checkbox changes
const [options, setOptions] = useState({
s22: {value: 'TRUE', s: 22},
s23: {value: 'TRUE', s: 23},
s24: {value: 'TRUE', s: 24}
})
const changeFilter = event => {
setOptions({ ...options, [event.target.name]: {
value: event.target.checked.toString().toUpperCase(),
s: event.target.value
}
})
}
<div id="filter">
<p>
<label>
<input name="s22" type="checkbox" value="22" onChange={changeFilter} />
<span>УК</span>
</label>
</p>
<p>
<label>
<input name="s23" type="checkbox" value="23" onChange={changeFilter} />
<span>ФК</span>
</label>
</p>
<p>
<label>
<input name="s24" type="checkbox" value="24" onChange={changeFilter} />
<span>ФТ</span>
</label>
</p>
</div>
Found similar questions but there was a problem with preventDefault
Full code
import React, {useCallback, useContext, useEffect, useState} from 'react'
import {useHttp} from '../hooks/http.hook'
import {AuthContext} from '../context/AuthContext'
import {Loader} from '../components/Loader'
export const TreePage = () => {
const [tree, setTree] = useState([])
const [options, setOptions] = useState({
s22: {value: 'TRUE', s: 22},
s23: {value: 'TRUE', s: 23},
s24: {value: 'TRUE', s: 24}
})
const {loading, request} = useHttp()
const {token} = useContext(AuthContext)
const fetchTree = useCallback(async () => {
try {
const fetched = await request('/api/tree', 'GET', options, {
Authorization: `Bearer ${token}`
})
setTree(fetched)
} catch (e) {}
}, [token, request, options])
useEffect(() => {
fetchTree()
}, [fetchTree])
useEffect(() => {
var zoom = 1;
var zoomStep = 0.1;
document.getElementById("zoomIn").addEventListener("click",function(){
zoom += zoomStep; document.getElementById("zoomtext").style.transform = "scale("+zoom+")";
});
document.getElementById("zoomOut").addEventListener("click",function(){
if(zoom > zoomStep){
zoom -= zoomStep;
document.getElementById("zoomtext").style.transform = "scale("+zoom+")";
}
});
})
const changeFilter = event => {
setOptions({ ...options, [event.target.name]: {
value: event.target.checked.toString().toUpperCase(),
s: event.target.value
}
})
}
if (loading) {
return <Loader/>
}
return (
<>
{!loading &&
<div className="row">
<div className="col s6 offset-s3">
<div id="filter">
<p>
<label>
<input name="s22" type="checkbox" value="22" onChange={changeFilter} />
<span>УК</span>
</label>
</p>
<p>
<label>
<input name="s23" type="checkbox" value="23" onChange={changeFilter} />
<span>ФК</span>
</label>
</p>
<p>
<label>
<input name="s24" type="checkbox" value="24" onChange={changeFilter} />
<span>ФТ</span>
</label>
</p>
</div>
<div dangerouslySetInnerHTML={{__html: tree}}></div>
</div>
</div>
}
</>
)
}