not showing the inital value

<Select
styles={selectStyles}
id='document_type'
name='document_type'
placeholder='---'
isClearable
onBlur={formik.handleBlur}
value={document_type?.find(
(option) => option.id.toString() === formik.values.document_type
)}
options={document_type?.map((mapRow) => ({
id: mapRow.id,
name: mapRow.name_da,
}))}
getOptionLabel={(option) => option.name}
getOptionValue={(option) => option.id}
onChange={(selectedOption) => {
formik.setFieldValue('document_type', selectedOption ? selectedOption.id : '')
}}
/>
this is my code i have set the inital value to formik and the inital value is an id from douments type but react select doesnt show to name of selected value but simple select option do it, the second problem is that if i reset the from values, the values are cleaning but lables still keeps in Select option

Start with the shown Select/Formik value, options, getOptionLabel, and getOptionValue wiring; compare the initial id and reset value with the option objects supplied. Done means the initial option label is displayed and resetting Formik also removes the displayed label.