Problem retrieving updated state value in my component - reactjs

Question

I Have a component (simple) and a reducer to modify value in my state.
I increment my value in my state, but when I want to display this value updated in my component, it's not updated with the new state value.
I don't know if my usedispatch is incorrect.
In my dev tools I see my state updated and incremented, but my page don't change...
Here is my reducer:
import { data } from "jquery";
export const INCREMENT_COUNTER = "INCREMENT_COUNTER";
export const DECREMENT_COUNTER = "DECREMENT_COUNTER";
export function increment(amount) {
console.log('-------------------amount', amount);
return {
type: INCREMENT_COUNTER,
payload: amount
}
}
export function decrement(amount) {
return {
type: DECREMENT_COUNTER,
payload: amount,
};
}
const initialState = {
data: 42,
}
export default function testReducer(state = initialState, {type, payload}) {
Object.assign(state.data, data);
switch (type) {
case INCREMENT_COUNTER:
console.log('increment reducer', {...state});
return {
...state,
...state.data,
data: state.data + payload,
};
case DECREMENT_COUNTER:
console.log('decrement reducer');
return {
//...state,
data: state.data - payload,
};
default:
return state;
}
}
and there is my component :
import React, {useCallback, useEffect} from "react"
import { useStore } from "react-redux";
import {useDispatch, useSelector} from "react-redux"
import {decrement, increment} from "./testReducer.js"
export default function Sandbox() {
const dispatch = useDispatch();
const data = useSelector((state) => state.test);
const store= useStore();
const toto = store.getState().test.data;
console.log('------------ttititi--------', store.getState().test.data);
const inc = useCallback(() => {
console.log('-----------inc', data);
console.log('-----------inc2', toto);
dispatch(increment(2))
}, [dispatch, data, toto]
);
const dec = useCallback(() => {
dispatch(decrement(2))
}, [dispatch, data]);
return (
<>
{toto.test?.data}
<h1>Testin2g</h1>
<h3>The data is: {data.data} -- {toto}</h3>
<button onClick={inc} content="increment" color="green">increment</button>
<button onClick={dec} content="decrement" color="red">decrement</button>
</>
)
}
This is how I do in my rootReducer:
import {combineReducers} from 'redux'
import testReducer from "../sandbox/testReducer.js";
import authReducer from "../modules/auth/authReducer";
import businessesReducer from "../modules/business/businessesReducer";
// import eventReducer from '../../features/events/eventReducer'
const rootReducer = combineReducers({
test: testReducer,
auth: authReducer,
businesses: businessesReducer,
// event: eventReducer
})
export default rootReducer;
configureStore.js file :
import {applyMiddleware, compose, createStore} from "redux"
import rootReducer from "./rootReducer"
import thunk from "redux-thunk";
export function configureStore() {
const composeEnchancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
return createStore(rootReducer, composeEnchancer(applyMiddleware(thunk)))
}