how to set defaultValue in AdvancedSelect using react?

[ashikck]

import React, { useEffect, useState } from 'react'; import { BsChevronExpand } from 'react-icons/bs'; import { HSSelect } from 'preline'; import { ValidationError } from '@components/form';

const SelectField = ({ register, name, form = '', defaultValue, models, setValue, errors, required, ...rest }) => { const [selectedOption, setSelectedOption] = useState(defaultValue);

const options = models?.map((model) => ( {model.title ? model.title : model.name} )); useEffect(() => { const el = HSSelect.getInstance('#' + form + name); if (el) { el.on('change', (val) => { setValue(form + name, val); setSelectedOption(val); }); } }, []);

return ( <div className='relative w-full'> <select id={form + name} defaultValue={selectedOption} data-hs-select='{ "placeholder": "Select option...", "toggleTag": "<button type="button">", "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-3 px-4 pe-9 flex text-nowrap w-full cursor-pointer bg-white border border-gray-300 rounded-lg text-start text-sm focus:border-blue-500 focus:ring-blue-500 before:absolute before:z-[1] dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600", "dropdownClasses": "mt-2 z-50 w-full max-h-[300px] p-1 space-y-0.5 bg-white border border-gray-300 rounded-lg overflow-hidden overflow-y-auto dark:bg-slate-900 dark:border-gray-700", "optionClasses": "py-2 px-4 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100 rounded-lg focus:outline-none focus:bg-gray-100 dark:bg-slate-900 dark:hover:bg-slate-800 dark:text-gray-200 dark:focus:bg-slate-800", "optionTemplate": "<div class="flex justify-between items-center w-full"><span class="hidden hs-selected:block"><svg class="flex-shrink-0 w-3.5 h-3.5 text-blue-600 dark:text-blue-500" xmlns="http:.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/>" }' className='hidden' {...register(form + name, { required: required })} {...rest} > {options} <div className='absolute top-1/2 end-3 -translate-y-1/2'> <BsChevronExpand className='flex-shrink-0 w-3.5 h-3.5 text-gray-500 dark:text-gray-500' /> {errors[name] && <ValidationError name={name} />} ); };

export default SelectField; Above react select component not seting up default value. plz help