React Component rendering with wrong props

My component is like –

const Header = (props) => {
  let financialState = useSelector((state: State) => state.financialsReducer);
  let actionPaneState=useSelector((state:State)=>state.actionPaneReducer);
  let uploadDownloadState = useSelector((state: State) => state.fsUploadDownloadReducer);
  let fsActionPane= useSelector((state: State) => state.fsActionsReducer);
  let entityDetails= useSelector((state:State)=>state.homeReducer.currentTile);
  let [instance, setInstance]=useState<any>(null);
  let [loading, setLoading]=useState(true);
  let dispatch=useDispatch();
  const showToast = useToast();

  useEffect(()=>{
    const setData=async ()=>{
       setLoading(true);
       let ins=await GenerateActionPropsFactory?.
       generate(actionPaneState?.actionType, financialState.config, showToast, financialState, fsActionPane, actionPaneState, entityDetails, dispatch)?.fetchData()
       setInstance(ins);
       setLoading(false);
    }
    if(actionPaneState.actionType !=null) setData();
    else  setInstance(null);
    },[actionPaneState?.actionType])

  return (
  <>
      <div>
        <Button onClick={onLockClick} >Lock </Button>
        <Button onClick={onDeleteClick} >Delete </Button>
        <Button onClick={onApproveClick} >Approve </Button>
        {actionPaneState?.isActionPaneOpen && actionPaneState?.actionType!=null  && (loading? <ActionPaneLoading open={loading} /> :
        <ActionPane type={actionPaneState?.actionType}  
        actionProps={instance?.getProps(fsActionPane)} />)
        }
    </>
  )
}

export default FinancialsHeader;

actionPaneState.type can be lock, delete and approve and null(when pane is closed)

the fetch data call in useEffect is asynchronous. fetches data from backend and then props are formed from it.

I have 3 types of actions- Approve, delete and lock- for each of them a separate component is rendererd throught ActionPane like-

const ActionPane = (props: IFActionPane) => {
    return (
        <div>{ActionRendererFactory.generate(props?.type, props?.actionProps)}</div>
    )
}

export default ActionPane;

ActionRendererFactory is rendering either or LockPane, ApprovePane, DeletePane as per actionpaneState.type

My issue is –

This ActionPane gets rendered correctly when I select an action for the first time(lock, delete or approve)
For eg- my action type is lock and pane is LockPane
now i click on delete action-> action type changes to delete
but instance does not change to delete—-> and for delete action its tried to render deletePane with props of lock.

New Pane is getting rendered with older instance props.

How can i avoid this initial rendering with mismatch props?

************************ setting of actionPaneState?.actionType

so the structure of code is like-

<Financials.tsx /> is parent component

It renders-

<Header />
<financialsRenderer />
<BottomPane />

Now actionPaneState?.actionType can be set through <financialsRenderer /> and <Header /> as well,

header contains icon buttons for- lock, delete and approve, on clicking of them actionPaneState?.actionType is changed.