I want to build a Custom React Select component where I can have a checkbox in front of the option and Select All option with intermidate property

I am building a react component where I want a input field with the dropdown , when I type in field a dropdown open and each option have checkbox in front of it and when a user check the checkbox , it value is stored in input filed along with close icon.It also have select All option which will be shown intermediate sign when fewer is selected and checked when all are selected.I want this functionality to work properly as I am facing several problem.I am building this component to work with formik form and dropdown open on select on form

Here is my Code.

 import React, { useState, useEffect, useRef, ReactNode } from 'react'
import { FieldFeedbackLabel } from '../../../../_metronic/partials/controls';
interface MultiSelectComponentProps {
    name: string;
    label: string;
    required: boolean;
    type: string
    id: string;
    field: {
        name: string;
        value: any;
        onChange: (event: any) => void;
        onBlur: (event: any) => void;
    };
    form: {
        touched: { [name: string]: boolean };
        errors: { [name: string]: string };
        setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void;

    };
    allowMultiSelect: boolean;
    withFeedbackLabel?: boolean;
    customFeedbackLabel?: string;
    options: string[];
    onChange: (selectedOptions: string[]) => void;
}
const getFieldCSSClasses = (touched: boolean, errors: string): string => {
    const classes = ["form-control form-control-lg form-control-solid mb-3"];

    if (touched && errors) {
        classes.push("is-invalid");
    }

    if (touched && !errors) {
        classes.push("is-valid");
    }

    return classes.join(" ");
};
export default function MultiSelectDropdown({ name,
    label,
    required,
    id,
    field,
    type = 'select',
    form: { touched, errors, setFieldValue },
    withFeedbackLabel = true,
    customFeedbackLabel,
    options,
    onChange,
    allowMultiSelect = true,
    ...props
}: MultiSelectComponentProps) {
    const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
    const [searchTerm, setSearchTerm] = useState<string>('');
    const [filteredOptions, setFilteredOptions] = useState<string[]>(options);
    const [selectAll, setSelectAll] = useState(false);
    const divRef = useRef<HTMLDivElement | null>(null);
    const indetSetter = React.useCallback((el: any) => {
        if (el && selectedOptions.length && !selectAll) {
            el.indeterminate = true;
            el.checked = false
        }else if(el &&(selectAll||selectedOptions.length ===filteredOptions.length)){
            el.indeterminate = false;
            el.checked = true
        }
    }, [selectedOptions,selectAll,filteredOptions.length]);
    const toggleOption = (option: string) => {
        const isSelected = selectedOptions.includes(option);

        if (isSelected) {
            setSelectedOptions(selectedOptions.filter((item) => item !== option));
        } else {
            if (allowMultiSelect) {
                setSelectedOptions([...selectedOptions, option]);
            } else {
                setSelectedOptions([option]);
            }
        }
        setSelectAll(false)
    };
    const handleSelectAllChange = () => {
        if (selectAll) {
            setSelectedOptions([]);
        } else {
            setSelectedOptions([...filteredOptions]);
        }
        setSelectAll(!selectAll);
    };

    const renderSelectedOptions = () => {
        if (selectedOptions.length === 0) {
            return null;
        }

        return (
            <div className="selected-option">
                {selectedOptions.map((option) => (
                    <span key={option} className="selected-option">
                        {option}
                        <span
                            className="remove-option"
                            onClick={() => toggleOption(option)}
                        >
                            &#10005;
                        </span>
                    </span>
                ))}
            </div>
        );
    };

    const handleSearchChange = () => {
        const searchText = divRef.current?.textContent
        if (searchText) {
            setSearchTerm(searchText);
        } else {
            setSearchTerm('')
        }

    };
    useEffect(() => {
        const filtered = options.filter((option) =>
            option.toLowerCase().includes(searchTerm.toLowerCase())
        );
        setFilteredOptions(filtered);
    }, [searchTerm, options]);
    useEffect(() => {
        setFieldValue(field.name, selectedOptions)
    }, [selectedOptions])
    return (
        <>
            <div className="multi-select-dropdown">
                {label && <label className="fw-bold fs-6">Select {label}</label>}
                {required && <span style={{ color: "red" }}>*</span>}
{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
                <div
                    className="editable-div form-control form-control-lg form-control-solid mb-3"
                    contentEditable="true"
                    ref={divRef}
                    onInput={handleSearchChange}
                >
                    <div className="selected-options"
                        contentEditable="false"

                    >{renderSelectedOptions()}</div>


                </div>
                <input
                    type='hidden'
                    name={field.name}
                    className={getFieldCSSClasses(touched[field.name], errors[field.name])}
                    value={selectedOptions}
                />


                {searchTerm && (
                    <>
                        <div className="dropdown-options dropdown-content">
                            {allowMultiSelect && (<>
                                <div className="dropdown-header">
                                    <input
                                        type="checkbox"
                                        ref={indetSetter}
                                         checked={selectAll||selectedOptions.length===filteredOptions.length}
                                        onChange={handleSelectAllChange}
                                    /><span>Select All</span>
                                </div>
                            </>)}

                            {filteredOptions.map((option) => (
                                <div key={option} className="option">
                                    <input
                                        type="checkbox"
                                        value={option}
                                        checked={selectedOptions.includes(option)}
                                        onChange={() => toggleOption(option)}
                                    />
                                    <span className='dropdown-option-value'>{option}</span>
                                </div>
                            ))}
                        </div>
                    </>
                )}
            </div>
            {withFeedbackLabel && (
                <FieldFeedbackLabel
                    error={errors[field.name]}
                    touched={touched[field.name]}
                    label={label}
                    type={type}
                    customFeedbackLabel={customFeedbackLabel}
                />
            )}
        </>
    )
}

I tried different react packages like react-select and multiselect-react-dropdown and other but It doesn’t fullfill all the requirement like Showing it intermidate selected checkbox