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)))
}