How to rewrite the code using conditional rendering in react and javascript?

i have code like below

const mode = isActiveMode;

{!isActiveMode && runId && !isEmpty(items) && (
    <>
        <Flex>
            //more jsx similar
            <Icon onClick={() => 
                setItemState((previous: any) => ({
                    ...previous,
                    items: undefined,
                }))
            }
        />
        <TabPanel>
            <Table />
        </TabPanel>
    </>
)}

{isActiveMode && runId && !isEmpty(items) && isTableOpen && (
    <>
        <Flex>
            //more jsx similar
            <Icon onClick={() => 
                setItemState((previous: any) => ({
                    ...previous,
                    items: undefined,
                }))
            }
        />
        <TabPanel>
            {selections.length === 1 ? (
                <Table/> ): ( <div>hello</div>)
            }
        </TabPanel>
        
            
    </>
)}

i have two renderings based on different conditions. the code inside is almost same in both cases. how can i reuse the code in this case. could someone please help me with this.

How can i rewrite above code into one with conditions using reusable code. thanks.