React-Select with Formik Reset/Clear button

What i want, a "reset/clear" button on the first page to refresh the searchable drop down list of react-select with Formik.This is the first page,the one after is the second,the problem iam facing is to refresh the code from a clear button in the first page,i tried everything i can to change,i added some props that are not needed.

<SearchableDropDownList
onChange={(value) =>
formik.setFieldValue('formDay', value || null)}
resetValue={resetValue}
value={formik.values.formDay}
options={dayOptions}
formik={formik}
/>
    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';
    // https://codesandbox.io/s/1j4zxl8bq
    
    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');
    
        // https://nibes.cn/blog/22525
        return (
            <div className={className}>
                <CreatableSelect
                    value={defaultValue(options, value)}
                    styles={colourStyles}
                    onChange={handleChange}
                    isClearable
                    ref={inputRef}
                    options={options}
                />
            </div>
        );
    };