I am fetching data and showing in field to edit, but when i refresh the page data not show

.........
.........
const [image, setImage] = useState<any>(`http://localhost:3000`+data?.reward?.Media?.url)
const { userData } = useContext(UserAuthContext);
const [open, setOpen] = useState(false);
const navigate = useNavigate();
const [
editRewardWithoutImage,
{
data: editRewardWithoutImageData,
error: editRewardWithoutImageError,
loading: editRewardWithoutImageLoading,
},
] = useMutation(UPDATE_REWARD_WITHOUT_IMAGE);
const [
editRewardWithImage,
{
data: editRewardWithImageData,
error: editRewardWithImageError,
loading: editRewardWithImageLoading,
},
] = useMutation(UPDATE_REWARD_WITH_IMAGE);
const formik = useFormik({
enableReinitialize: true,      //i am using enableReinitialize here
initialValues: {
rewardname: data?.reward?.RewardName,
rewarddescription: data?.reward?.RewardDescription,
image: {
preview: "",
raw: ""
},
rewardvalue: data?.reward?.Points,
quantity: data?.reward?.AvailableQuantity,
file: undefined,
},
validationSchema: validationSchema,
onSubmit: (values: any) => {
if(!values.file){
console.log("in if")
editRewardWithoutImage({
variables:{
id: id,
rewardName: values.rewardname,
rewardDescription: values.rewarddescription,
availableQuantity: values.quantity,
points: values.rewardvalue
}
})
}else{
editRewardWithImage({
variables:{
id: id,
rewardName: values.rewardname,
rewardDescription: values.rewarddescription,
availableQuantity: values.quantity,
points: values.rewardvalue,
imageUrl: values.file
}
})
}
}
})
useEffect(() => {
if (editRewardWithoutImageData || editRewardWithImageData) {
setOpen(true);
// setTimeout(function () {
//     navigate('/rewardlist')
// }, 3000);
}
if (editRewardWithoutImageError || editRewardWithImageError ) {
alert("something went wrong!");
formik.resetForm();
}
}, [editRewardWithoutImageData, editRewardWithoutImageError, editRewardWithImageData, editRewardWithImageError])
............................
.............................
return (<>
<Stack
sx={style.main}
>
<Box sx={style.titleParent}
borderBottom={1}
borderColor={'#E1E6E8'}
>
<Typography sx={style.title}> New listing</Typography>
</Box>
<Box sx={style.formParent}>
<form onSubmit={formik.handleSubmit}>
<Box sx={style.formInputParent}>
<Box sx={style.inputSec1} >
<TextField
value={formik.values.rewardname}
onChange={(e) => {
formik.handleChange(e);
setIsDirty(true);
}}
error={formik.touched.rewardname && Boolean(formik.errors.rewardname)}
//  helperText={formik.touched.rewardname && formik.errors.rewardname}
required id="rewardname" name="rewardname" label="Reward name" variant="outlined" fullWidth />
<TextField
id="rewarddescription"
name="rewarddescription"
value={formik.values.rewarddescription}
onChange={(e) => {
formik.handleChange(e);
setIsDirty(true);
}}
multiline
minRows={3}
placeholder="Reward description"
error={formik.touched.rewardname && Boolean(formik.errors.rewardname)}
// helperText={formik.touched.rewardname && formik.errors.rewardname}
required label="Reward description" variant="outlined" fullWidth />
</Box>
<Box sx={style.divider} ></Box>
<Box sx={style.inputSec2}>
<Typography sx={style.rewardDetails}>Reward details</Typography>
<Box sx={{ border: 1, marginTop: '16px', borderColor: '#E1E6E8', width: '100%' }} ></Box>
<Typography sx={style.mediaText}>Media</Typography>
{/* <Box sx={style.fileUploadParent} >
{<><label htmlFor="image">
{image && <img
src={image}
style={{ height: 130, }}
alt={'Logo'}
loading="lazy"
color='red'
/>}
{!image &&  <Typography sx={style.uploadImgText}>Upload image</Typography>}
</label>
</>}
<input
type="file"
id="image"
name="image"
required
style={style.file}
onChange={(event) => {
if (event?.target?.files) {
setImage(URL.createObjectURL(event?.target.files[0]))
formik.setFieldValue("file", event?.target?.files[0])
}
}}
/>
</Box> */}
<Box sx={{position:"relative", ...style.fileUploadParent}}>
{image ? (
<>
<label htmlFor="image">
<img
src={image}
style={{ height: 130, display:"flex", justifyContent:"center", alignSelf:"center"}}
alt="Logo"
loading="lazy"
color="red"
/>
<Typography sx={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
cursor: "pointer",
...style.uploadImgText, 
}}>Change Image</Typography>
</label>
</>
) : (
<>
<label htmlFor="image">
<Typography sx={style.uploadImgText}>Upload image</Typography>
</label>
</>
)}
<input
type="file"
id="image"
name="image"
style={style.file}
onChange={(event) => {
setIsDirty(true);
if (event?.target?.files) {
setImage(URL.createObjectURL(event?.target.files[0]));
formik.setFieldValue("file", event?.target?.files[0]);
}
}}
/>
</Box>
<Box sx={style.divider1} ></Box>
<Typography sx={style.valueText}>Value</Typography>
<Typography sx={style.valueDesc}>This will be deducted from the student’s total accumulated points</Typography>
<TextField
sx={style.rewardvalInput}
value={formik.values.rewardvalue}
onChange={(e) => {
formik.handleChange(e);
setIsDirty(true);
}}
type='number'
error={formik.touched.rewardvalue && Boolean(formik.errors.rewardvalue)}
// helperText={formik.touched.rewardvalue && formik.errors.rewardvalue}
required id="rewardvalue" name="rewardvalue" label="Reward points" variant="outlined" fullWidth />
<Box sx={style.divider1} ></Box>
<Typography sx={style.qtyText}>Available quantity</Typography>
<TextField
sx={style.rewardvalInput}
value={formik.values.quantity}
type='number'
onChange={(e) => {
formik.handleChange(e);
setIsDirty(true);
}}
error={formik.touched.quantity && Boolean(formik.errors.quantity)}
// helperText={formik.touched.quantity && formik.errors.quantity}
required id="quantity" name="quantity" label="Reward quantity" variant="outlined" fullWidth />
</Box>
</Box>
<Paper
sx={style.buttomButtonParent} elevation={0}>
<LoadingButton
loading={deleteRewardLoading}
loadingPosition='center'
onClick={() => deleteRewardButton()}
variant="outlined"
color="error"
sx={{  borderRadius: '4px', height: '44px', width: "fit-content", paddingY: '10px', paddingX: '24px', alignItems: 'center', display: 'flex', gap: '6px'}}
>
Delete
</LoadingButton>
{/* <Button
type='submit'
sx={style.publishParent}>
<Typography sx={{ textTransform: 'none' }} style={style.publishText}>Publish</Typography>
</Button> */}
<LoadingButton
type='submit'
loading={editRewardWithoutImageLoading || editRewardWithImageLoading}
loadingPosition='center'
disabled={!isDirty || editRewardWithoutImageLoading || editRewardWithImageLoading}
sx={style.publishParent} variant="contained" disableElevation>
<Typography sx={{
fontWeight: '500',
fontSize: '16px',
lineHeight: '24px',
letterSpacing: '-0.2px',
textTransform: 'none',
}}>Update</Typography>
</LoadingButton>
</Paper>
</form>
</Box>
</Stack>
</>)
}

i tried enableReinitialize: true, but its showing the data with label. and Image is also not available.It should show the data after refreshing the page in field.
when i click on the tab of this then it shows the data properly but after reresh it dont. And please help me to solve the problem......

showing error : react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17 in console.

Data comes after the page loads. So we have to wait for data and show loader instead of rendering the page. So you have to add loader for waiting, and when data fetched then render the page with data.