I am making a real time betting app and My redux state is updating but my ui is not affecting Can anyone help me with the code

Question

I am developing real time sportsbook using MERN stack and redis as memory db.. Everything seems right except react-redux not passing state to components as they are updated. I can see the nextstate clearly getting latest data in the console/ redux logger..

Here is the component reducer file..

import ActionTypes from './betslip.types';
    import { calculateTotalReturn } from './betslip.utils';
    
    const INITIAL_STATE = {
        bets: [],
        updateBet: true,
        updatedGame: true,
        betType:'single',
        totalStake:0,
        singleTotalReturn:0,
        multiTotalReturn:0,
        systemTotalReturn:0
    }
    
    export const betslipReducer = (state = INITIAL_STATE, action) => {
        switch(action.type) {
            case ActionTypes.SET_UPDATE_BET:
              return {
                    ...state,
                    updateBet: action.value
                };
            case ActionTypes.SET_BET_TYPE:
                return {
                        ...state,
                        betType: action.value
                    };
                case ActionTypes.UPDATED_GAMES:
                    return {
                          ...state,
                          updatedGame: !state.updatedGame
                      };
            case ActionTypes.SET_TOTAL_STAKE:
                return {
                        ...state,
                        totalStake: action.value 
                    };
            case ActionTypes.PUT_BET:
                return {
                        ...state,
                        bets: [action.value, ...state.bets]
                    };
            case ActionTypes.UPDATE_BET_ODD:
                var betsOddsCopy = state.bets;
                var indexOdds = betsOddsCopy.findIndex(n => n._id === action.betId);
                betsOddsCopy[indexOdds].odds = action.value;
                return {
                        ...state,
                        bets: betsOddsCopy
                    };
            case ActionTypes.UPDATE_BET_STAKE:
                var betsStakeCopy = state.bets;
                var indexStake = betsStakeCopy.findIndex(n => n._id === action.betId);
                betsStakeCopy[indexStake].stake = action.value;
                return {
                        ...state,
                        bets: betsStakeCopy
                    };
            case ActionTypes.DELETE_BET:
                var betsCopy = state.bets;
                const newBets = betsCopy.filter(b => b._id != action.betId)
                return {
                        ...state,
                        bets: newBets
                    };
            case ActionTypes.CALCULATE_TOTAL_RETURN:
                return calculateTotalReturn(state);
        
            default:
                return state;
          }
    }

The bets property in this file is not updating but betslip.bets is updating

import React, { useState } from 'react';
    import { connect } from 'react-redux';
    
    import { setUpdateBet, calculateTotalReturn, setBetType, setTotalStake, updateBetStake } from '../../redux/betslip/betslip.actions';
    
    import Bet from '../bet/bet.component';
    
    import './BetSlip.css';
    
    //bets, updateBet, betType, totalStake, singleTotalReturn, multiTotalReturn, systemTotalReturn,
    
    const BetSlip = ({bets, updateBet, betType, totalStake, singleTotalReturn, multiTotalReturn, systemTotalReturn, setUpdateBet, setBetType, setBetStake, setTotalStake, calculateTotalReturn }) =>  { 
    
        //const bets = store.getState().betslip.bets;
        //console.log(betslip);
    
        const [collapsed, setCollapsed] = useState(bets.length > 1 ? true : false);
    
        const handleStakeTypeChange = (e) => {
            if(e.target.dataset.type == 'multi' && bets.length > 8){
                return;
            } else if(e.target.dataset.type == 'system' && bets.length != 3){ 
                return;
            }
            setBetType(e.target.dataset.type) 
            calculateTotalReturn();
        }
    
        const handleOpen = () => {
            setCollapsed(!collapsed);
        }
    
        const handleUpdateBet = (e) => {
            if(e.target.checked){
                setUpdateBet(true);
            } else{
                setUpdateBet(false);
            }
        }
    
        const handleStakeChange = (e) => {
                if(betType == 'single'){
                    setBetStake(bets[0]._id, e.target.value)
                    calculateTotalReturn();
                } else {
                    setTotalStake(e.target.value);
                    calculateTotalReturn();
                }
    
                
                //console.logbets);
        }
    
    
    
        React.useEffect(() => {
            console.log('bet changed')
            if(bets.length <= 1){
                setBetType('single')
                calculateTotalReturn();
            }
            calculateTotalReturn();
        },[bets]);
    
        // setInterval(() => {
        //     var total = 0;
        //     bets.forEach(bet => {
        //         total =+ bet.stake;
        //     })
        //     setTotalBetPrice(total);
        // }, 5000);
       
        var totalOdds;
    
        if(betType == 'single'){
            totalOdds = 0;
            bets.forEach(bet => {
                if( bet.odds != 'suspended'){
                    totalOdds += bet.odds;
                }
                //console.log('Hii');
            })
        } else if(betType == 'multi'){
            totalOdds = 1;
            bets.forEach(bet => {
                if( bet.odds != 'suspended'){
                    totalOdds *= parseFloat(bet.odds);
                }
            })
        } else {
            totalOdds = 0;
        }
    
        //console.log(updatedGames)
    
    
        return <div className='betslip__container'>
            <div className='betslip__badge' onClick={handleOpen}>
                <span>Bet Slip ({bets.length})</span>
                {collapsed ? <span><i className="fa fa-chevron-up" /></span> : <span><i className="fa fa-chevron-down" /></span>}
            </div>
    
                {(collapsed == false && bets.length > 1) && <div className='betslip__stakeType'>
                    <div className={`betslip__stakeType__item ${betType == 'single' && "active"}`} onClick={handleStakeTypeChange} data-type='single'>
                        Single
                    </div>
                    {bets.length < 9 && <div className={`betslip__stakeType__item ${betType == 'multi' && "active"}`} onClick={handleStakeTypeChange} data-type='multi'>
                        Multi/Parlay
                    </div>}
                    {bets.length == 3 && <div className={`betslip__stakeType__item ${betType == 'system' && "active"}`} onClick={handleStakeTypeChange} data-type='system'>
                        System 2/3
                    </div>}
                </div> }
                
                
                <div className='betslip__body__container'>
                        {
                            collapsed == false && bets.map(bet => (
                                <Bet 
                                    key={bet._id} 
                                    id={bet._id} 
                                    title={bet.optionName} 
                                    odds={bet.odds} category={bet.category} 
                                    teams={bet.teams}
                                    stake={bet.stake} 
                                    stakeType={betType} />
                            ))
                        }
                </div>
                
                
            {!collapsed && <div className="betslip__footer">
                {((betType == 'multi' || betType == 'system') || bets.length < 2) && <div className="betslip__stake">
                    <input type='number' className='betslip__stake__input' placeholder='Stake' value={betType == 'single' ? (bets[0].stake > 0 ? bets[0].stake : '') : (totalStake > 0 ? totalStake : '')} onChange={handleStakeChange} />
                </div>}
                 <button className="betslip__btn__saving">
                    <span className="betslip__btn__saving__text">Place Bet</span>
                    <span className='totals'>
                        <span className='totals__text'>
                            Total Odds: {parseFloat(totalOdds).toFixed(3)}
                        </span>
                        {betType == 'single' && <span>Total Return: {singleTotalReturn > 0 ? parseFloat(singleTotalReturn).toFixed(2) : singleTotalReturn}</span>}
                        {betType == 'multi' && <span>Total Return: {multiTotalReturn > 0 ? parseFloat(multiTotalReturn).toFixed(2) : multiTotalReturn}</span>}
                        {betType == 'system' && <span>Total Return: {systemTotalReturn > 0 ? parseFloat(systemTotalReturn).toFixed(2) : systemTotalReturn}</span>}
                        
                    </span> 
                    
                </button>
            </div>}
            {!collapsed && <div className='betslip__badge'>
             <div className="form-check">
                {updateBet 
                ? 
                <input className="form-check-input" type="checkbox" value="" id="flexCheckDefault" onClick={handleUpdateBet} defaultChecked />
                :
                <input className="form-check-input" type="checkbox" value="" id="flexCheckDefault" onClick={handleUpdateBet} />
                }
                <label className="form-check-label" htmlFor="flexCheckDefault">
                    Accept Change
                </label>
                </div> 
            </div>}
        </div> 
    }
    
    const mapStateToProps = state => ({
        betType: state.betslip.betType,
        updateBet: state.betslip.updateBet,
        totalStake: state.betslip.totalStake,
        singleTotalReturn: state.betslip.singleTotalReturn,
        multiTotalReturn: state.betslip.multiTotalReturn,
        systemTotalReturn: state.betslip.systemTotalReturn,
        bets: state.betslip.bets
    })
    
    const mapDispatchToProps = dispatch => ({
        setUpdateBet: value => dispatch(setUpdateBet(value)),
        setBetType: value => dispatch(setBetType(value)),
        setTotalStake: value => dispatch(setTotalStake(value)),
        setBetStake: (id, value) => dispatch(updateBetStake(id, value)),
        calculateTotalReturn: () => dispatch(calculateTotalReturn())
    })
    
    export default connect(mapStateToProps, mapDispatchToProps)(BetSlip);