What is the best approach to writing resuable modals in React?

I am writing an application in React + Material UI. There are actions on different pages in my application that use Modals and instead of using Material UI's Dialog on each of these pages, I have defined a global modal context that changes state to show and fills the modal with other props. Now my question is - what is the standard practice to rendering those props ? As in, at what point should I decide to create a separate modal/dialog for lets say forms as compared to simple actions ? Or is it correct if I use conditions to render anything and everything from within that one Modal ? As an example consider the following sample:

<DialogContent>
                <DialogContentText>
                    {modalTypeDefaults.text}
                </DialogContentText>
                <DialogContentText sx={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                marginTop: '5px'
                }}>
                    {
                        (modalTypeDefaults.type === 'user')
                            ? <UserInfoCellComponent displayName={modalProps.displayName} imageURL={modalProps.fkImageIdAvatar} username={modalProps.username.toLowerCase()} />
                            : (modalTypeDefaults.type === 'post')
                                ? <Box>
                                    <Typography>Title: {modalProps.title.toUpperCase()}</Typography>
                                    <Typography>Id: {modalProps.id}</Typography>
                                  </Box>
                                : (modalTypeDefaults.type === 'event')
                                    ? <Box
                                            sx={{
                                            alignItems: 'center',
                                            display: 'flex'
                                            }}
                                        >
                                            <Avatar
                                            src={modalProps.fkImageId}
                                            sx={{ mr: 2 }}
                                            />
                                            <Typography
                                            color="textPrimary"
                                            variant="body1"
                                            >
                                            <a href={modalProps.urlWebsite}>{modalProps.name}</a>
                                            </Typography>
                                      </Box>
                                    : ''
                    }
                </DialogContentText>
</DialogContent>

Are there standard practices ? I have looked around and found extremely variable answers. What is better for performance ?