Значения в input не изменяется (react redux)

Сделал инпут с value redux-react и на onChange изменение, но в state не изменяется value.

<input type="number" className="p-1 border-[2px] border-[#CCCCCC] rounded-md" onChange={(e) => props.setQuantityStickers(e.target.value)} value={props.builder.stickers.quantity}/>

Вот redux:

setQuantityStickers: (data) => {
        const action = {
            type: 'QUANTITY_STICKERS',
            data: data
        }
        dispatch(action)
    }

Вот в reducer state и изменение:

        case QUANTITY_STICKERS: 
        return{
            ...state,
            ...state.stickers,
            quantity: action.data
        }

stickers: {
    diameter: [
        {
            active: true,
            count: 40
        },{
            active: false,
            count: 50
        },{
            active: false,
            count: 60
        },{
            active: false,
            count: 90
        },{
            active: false,
            count: 110
        },{
            active: false,
            count: 140
        }
    ],
    quantity: 1,
    sample: [
        {
            active: true,
            name: 'Нет, не нужно'
        },{
            active: false,
            name: 'Да, из нашего каталога'
        },{
            active: false,
            name: 'Есть свой логотип/макет'
        }
    ],
    text: ''
}

Родитель

const Builder = (props) => {
  return (
    <div id="builder" className={`${container_style} py-[130px]`}>
        <div className='w-full flex justify-between items-center'>
            <MenuBuilder props={props} />
        </div>
        <div className='w-full flex flex-col'>
            <BuilderArea props={props}/>
        </div>
    </div>
  )
}

function mapStatesToProps(state) {
    return {
        state
    }
}


function mapDispatchToProps(dispatch) {
    return {
        setSizeXY: () => {
            const action = {
                type: 'SET_SIZE/XY',
            }
            dispatch(action)
        },
        selectMenu: (data) => {
            const action = {
                type: 'SELECT_MENU',
                data: data
            }
            dispatch(action)
        },
        selectDiameterStickers: (data) => {
            const action = {
                type: 'DIAMETER_STICKERS',
                data: data
            }
            dispatch(action)
        },
        setQuantityStickers: (data) => {
            const action = {
                type: 'QUANTITY_STICKERS',
                data: data
            }
            dispatch(action)
        }
    }
}

export default connect(mapStatesToProps, mapDispatchToProps)(Builder)

index файл:

const store = createStore(rootReducer)

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

App файл:

function App(props) {

  if(props.cart.openCart === true || props.header.openBurger === true){
    document.body.classList.add('noscroll')
  }else {
    document.body.classList.remove('noscroll')
  }

  return (
      <div className={`w-full`}>
        <Header />
        <Cart />
        <Home />
        <Why />
        <Builder />
      </div>
  );
}

function mapStatesToProps(state) {
    return {
        state
    }
}

export default connect(mapStatesToProps)(App)

BuilderArea:

import RadioBuilder from './components/radio'

const BuilderArea = ({props}) => {

    function renderMounted(){
        return (
            <>

            </>
        )
    }

        function renderListDiameterStickers(){
            const diameter = props.builder.stickers.diameter
            return (
                <>
                    {
                        diameter.map((el, index) => (
                            <div onClick={() => props.selectDiameterStickers(index)} key={index} className="flex font-regular text-[18px] text-[#333333] items-center cursor-pointer gap-[5px]">
                                <RadioBuilder active={el.active} />
                                {
                                    el.count
                                }
                            </div>
                        ))
                    }
                </>
            )
        }

    function renderStickers(){
        return (
                    <div className="max-w-max text-[#777777]">
                        <div className="text-[22px] font-semibold">
                            Наклейки
                        </div>
                        <div className="mt-[20px]">
                            <p className="text-[16px] font-semibold">
                                Диаметер наклейки, мм. <span className="text-[#B14442] font-bold">*</span>
                            </p>
                            <div className="mt-[5px] flex flex-col gap-[5px]">
                                {
                                    renderListDiameterStickers()
                                }
                            </div>
                        </div>
                        <div className="mt-[20px]">
                            <p className="text-[16px] font-semibold">
                                Количество, шт. <span className="text-[#B14442] font-bold">*</span>
                            </p>
                            <input type="number" className="p-1 border-[2px] border-[#CCCCCC] rounded-md" onChange={(e) => props.setQuantityStickers(e.target.value)} value={props.builder.stickers.quantity}/>
                        </div>
                    </div>
        )
    }

    function renderArea(){
        return (
            <>
            </>
        )
    }

    function renderChoose(){
        return (
            <div className='w-full flex text-[20px] text-[#757575] font-bold justify-center items-center py-10'>
                Выберите, что вам нужно. Для этого Вам поможет меню.
            </div>
        )
    }

    function renderAll(){
        if(props.builder.menu_way1 !== null){
            if(props.builder.menu_way3 !== null){
                return renderArea()
            }else if(props.builder.menu_way1 !== null){
                switch(props.builder.menu_way1){
                    case 'mounted':
                        return renderMounted()
                    case 'stickers':
                        return renderStickers()
                    default:
                        return renderChoose()
                }
            }else{
                return renderChoose()
            }
        }
        return renderChoose()
    }

    return (
        <>
            {
                renderAll()
            }
        </>
    )
}

export default BuilderArea

скриншот того, что данные приходят(в консоли видно)

в консоли можно увидеть

скриншот props.builder

введите сюда описание изображения

Функция изменения

        case QUANTITY_STICKERS:
        return{
                            ...state,
            ...state.stickers,
            quantity: action.data
        }

Ответы (0 шт):