So I have a Componenet Financials.tsx

which renders-
<ActionPane props={fsActionPane.actionProps} />

and fsActionPane= useSelector((state: State) => state.fsActionsReducer);

and contains a useEffect-

 useEffect(() => {
 FinancialsUtility.setPropsForLockUnlockPane();
    }, [
      fsActionPane.type])

FinancialsUtility.setPropsForLockUnlockPane(); this function internally sets fsActionPane.actionProps being send to ActionPane.

there is on button UI somewhere in the code which changes fsActionPane.type

FinancialsUtility.tsx is a static class —

and this function setPropsForLockUnlockPane() function conatins many fields that needs to be rendererd by

for eg-

{
                type: TOGGLE_WITH_HEADING,
                fieldProps: {
                  onChange: async (e, value) => {
                    debugger
                    await store.dispatch(setSelectedSheets(value))
                  },
                  toggleOp: sheets,
                  value: fsActionPaneState.selectedSheets,
                  toggleStyling: {
                    width: '8rem'
                  },
                  heading: {
                    name: 'Select Sheets',
                    btn: {
                      name: 'Select All Sheets',
                      onClick: async () => {
                        // if selected sheets length is equal to sheets options length then deselect all
                        if (fsActionPaneState.selectedSheets.length === sheets.length) await store.dispatch(setSelectedSheets([]))
                        else await store.dispatch(setSelectedSheets(sheets))
                      }
                    }
                  }
                }
      
              }

the field componenet that this object renders is—

 getToggleWithHeading=(params)=> {
        let toggleOptions: any = [];
        params?.toggleOp?.forEach((key) => {
            toggleOptions.push({ key: key, value: key });
        })
        return <div className="actionPaneToggleWithHeading" data-testid='TestactionPaneToggleWithHeading'>
            <div className="actionPaneToggleHeading">
                <div className='actionPaneToggleHeadingLeft'>{params?.heading?.name}</div>
                <IvpButton name={params?.heading?.btn?.name}
                    variant='text'
                    onClick={params?.heading?.btn?.onClick}
                    color="IvpButtonPrimary"
                    fontColor="#4981d1" />
            </div>
            <IvpToggle
                variant='IvpToggleButtonSet'
                value={params?.value}
                toggleOptions={toggleOptions}
                onChange={params?.onChange}
                toggleButtonDefaultForegroundColor={'#6e7198'}

                toggleButtonSelectedBackgroundColor={'#898fbd'}
                toggleButtonSelectedForegroundColor={'#ffffff'}
                
                toggleButtonHoverBackgroundColor={'#dfe1f0'}
                toggleButtonHoverForegroundColor={'#585b85'}
                toggleStyling={params.toggleStyling}

                borderRadius={'5px'}
            />
        </div>

    }

Now the issue is-

onChange: async (e, value) => {
debugger
await store.dispatch(setSelectedSheets(value))
},

this onchange sets selectedSheets present in reducer but does not re-render the component.
It does re-renders but before it has set the property in reducer. not after. I even added async await still not re-rendering.

Can somebody please help me with this one? Also if you feel my way of doing this is very complicated please help me out with another way.

************** little back story about the component *********************

So this is a generic parent componenet which has 3 child components under it being rendererd following a factory pattern. If ‘type’ is ‘Lock’ or ‘Unlock’ then ActionPane /> internally renders
so type is generated at runtime by user hence kept it in reducer.

I feel the issue can be that the function in FinancialsUtility that sets the props, might needs to be called again after setting the sheets value? but can i do it?