Formik with react-select

[RwGrid]

What i want, a "reset/clear" button on the first page to refresh the searchable drop down list of react-select with Formik
I am a beginner
this is the first page

                                                                          <div>
										<SearchableDropDownList
											onChange={(value) =>
												formik.setFieldValue('formDay', value || null)
											}
											resetValue={resetValue}
											value={formik.values.formDay}
											options={dayOptions}
											formik={formik}
										/>
										{formik.errors.formDay ? (
											<div className='error'>{formik.errors.formDay}</div>
										) : null}
									</div>

this is the second page:
import React from 'react';
import Select from 'react-select';
import CreatableSelect from 'react-select/creatable';
import chroma from 'chroma-js';
import { StylesConfig } from 'react-select';

export default ({ inputRef, onChange, options, value, className, resetValue,onBlur,formik }) => {
// -----------Creating design for react-select----------------------------For Creatable--umust
// --u must set this line as well : const color = chroma(data.color ?? 'black'); because there is no data on creatable
// so i must handle the empty created by the user input
const dot = (color = 'white') => ({
alignItems: 'center',
display: 'flex',

	':before': {
		backgroundColor: color,
		borderRadius: 10,
		content: '" "',
		display: 'block',
		marginRight: 8,
		height: 10,
		width: 10,
	},
});

const colourStyles = {
	control: (styles) => ({
		...styles,
		backgroundColor: '#212529',
		borderRadius: 10,
		borderColor: '#323232',
	}),
	option: (styles, { data, isDisabled, isFocused, isSelected }) => {
		const randomColor = 'black';
		const color = chroma(data.color ?? 'black');
		return {
			...styles,
			backgroundColor: isDisabled
				? undefined
				: isSelected
				? randomColor
				: isFocused
				? color.alpha(0.1).css()
				: undefined,
			color: isDisabled
				? '#ccc'
				: isSelected
				? chroma.contrast(color, 'white') > 2
					? 'white'
					: 'blue'
				: randomColor,
			cursor: isDisabled ? 'not-allowed' : 'default',

			':active': {
				...styles[':active'],
				backgroundColor: !isDisabled
					? isSelected
						? randomColor
						: color.alpha(0.3).css()
					: undefined,
			},
		};
	},
	input: (styles) => ({
		...styles,
		...dot(),
		color: 'grey',
		borderColor: '#6c5dd3',
		text: 'john@domain.com',
	}),
	placeholder: (styles) => ({
		...styles,
		...dot('#ccc'),
		borderColor: '#6c5dd3',
		text: 'john@domain.com',
	}),
	singleValue: (styles, { data }) => ({
		...styles,
		...dot('white'),
		color: 'grey',
		borderColor: '#6c5dd3',
		text: 'john@domain.com',
	}),
};
if (resetValue===true){
	value=null;
	// formik.setFieldValue('formDay', null)
	resetValue=false
}
const handleChange = (event) => {
	// Overwrite the event with your own object if it doesn't exist
	if (!event || value === null) {
		event = {
			target: inputRef,
			value: '',
		};
	}
	onChange(event);
};

const defaultValue = (options, value) => {
	return options ? options.find((option) => option.value === value) : null;
	// return {value:'developer',label:'Software Developer'};
};
// const randomColor =  `#`.concat( Math.floor(Math.random()*16777215).toString(16))

//  const color = chroma.random();

//  const color = chroma(data.color ?? 'black');

return (
	<div className={className}>
		<CreatableSelect
			value={defaultValue(options, value)}
			styles={colourStyles}
			onChange={handleChange}
			isClearable
			ref={inputRef}
			options={options}
		/>
	</div>
);

};