Child components get updated properly only after the second click in react functional component

I have the following component, where review assignments (props.peerReviewAssignmentIds) are loaded for a student's own work (related event is onClick_Submission) or a peer's work to review (related event is onClick_PeerReview ). These events work fine and the related data is loaded successfully. However, there is a problem with updating the content of the child components based on the value of the props.peerReviewAssignmentIds, which I elaborate below.

const AssignmentItem = (props) => {

    const assignment = props.assignments[props.currentAssignmentId];
    
    const onClick_Submission = (e) => {
        e.preventDefault();

        if (!st_showSubmission) {
            props.fetchPeerReviewAssignmentForStudent(currentUserId, assignment.activeReviewRoundId);           
        }

        set_showSubmission(!st_showSubmission);
        set_isPeerReview(false);
    }

    const onClick_PeerReview = (e) => {
        e.preventDefault();

        if (!st_showPeerReviews) {
            if (st_submissionContiues === false)
                props.fetchPeerReviewAssignmentForReviewer(currentUserId, assignment.activeReviewRoundId);
        }
        set_showPeerReviews(!st_showPeerReviews);
        set_isPeerReview(true);
    }

    return (
        <>             
            {
                st_showSubmission === true && props.peerReviewAssignmentIds.length > 0 &&
                <ReviewPhaseInfoForSubmission isPeerReview={false} />
            }            
        </>
    )
}
const mapStateToProps = state => ({
    peerReviewAssignmentIds: state.peerReviewAssignmentReducer.peerReviewAssignmentIds,
    loading_pra: state.peerReviewAssignmentReducer.loading,
    error_pra: state.peerReviewAssignmentReducer.error,
})

I will try to explain the problem with an example. When the first time onClick_Submission is triggered, props.peerReviewAssignmentIds[0] is set to 2, and all the sub components are loaded properly. Next, when onClick_PeerReview is triggered, props.peerReviewAssignmentIds[0] is set to 1, which is correct. But, the child components get updated according to the previous value of props.peerReviewAssignmentIds[0], which was 2. If the onClick_PeerReview event is triggered second time, then the child components get updated correctly according to the current value of props.peerReviewAssignmentIds[0], which is 1. Any ideas why this might be happening?

I further explain my code below.

Below is the ReviewPhaseInfoForSubmission component. In this component, based on props.peerReviewAssignmentIds[0] value (which gets updated in the parent component above) etherpadLaterSubmission variable is created with props.createSession_laterSubmission method.

const ReviewPhaseInfoForSubmission = (props) => {
    const [st_is_discussFeedback, set_is_discussFeedback] = useState(false);   

    useEffect(() => {
    
        set_is_discussFeedback(true);
        if (props.etherpadLaterSubmission === null) {
            props.createSession_laterSubmission(props.peerReviewAssignmentIds[0], discussFeedback.dueDate);        
        }                   
    }, [])

    return (
        <div className="p-1">
            {
                st_is_discussFeedback === true &&
                <ProvideOrDiscussFeedback provide0discuss1revise2={1} isPeerReview={props.isPeerReview} /> 
            }
        </div>
    );
}

const mapStateToProps = (state) => ({
    etherpadLaterSubmission: state.etherpadReducer.etherpadLaterSubmission,
    loading_ep: state.etherpadReducer.loading,
})

Then, in a child component, ProvideOrDiscussFeedback (see below), the props.etherpadLaterSubmission value is used for display purposes.

const ProvideOrDiscussFeedback = (props) => {

    return <div className="p-3 shadow">                   
        {
            props.etherpadLaterSubmission &&
            <div>
                <DisplayingEtherpad etherpadSession={props.etherpadLaterSubmission } />
            </div>
        }
    </div>
}