React multiselection with Formik not reading the selected value - reactjs

Question

I'm using Formik and windmill for the multiselect form, see picture below. The problem is that I implemented a search functionality to look into the array of options and now it appears that even though I'm selecting an option it is not passing the value to Formik and is not submitting the form. Any help would be greatly appreciated. Thanks!
form
import { React, useState } from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import { partService } from '../../services';
import { SearchIcon, AddIcon } from '../../icons';
import { Input, Label, Select, HelperText } from '#windmill/react-ui';
function CreateElementForm({ formRef, callback, partId }) {
const [searchTerm, setSearchTerm] = useState('');
const [iconSelection, setIconSelection] = useState(true);
const tempArray = [
{ name: 'data1', value: 'value1' },
{ name: 'data2', value: 'value2' },
{ name: 'data3', value: 'value3' },
{ name: 'data4', value: 'value4' },
];
return (
<Formik
innerRef={formRef}
initialValues={{
description: '',
percentage: '',
material: '',
}}
validationSchema={Yup.object().shape({
description: Yup.string().required('Element name is required'),
percentage: Yup.number().required('Percentage is required'),
material: Yup.string().required('Material is required'),
})}
onSubmit={(
{ description, percentage, material },
{ setStatus, setSubmitting }
) => {
setStatus();
setTimeout(async () => {
await partService
.createElement(partId, description, percentage, material)
.then(
(response) => {
callback(true);
},
(error) => {
if (error.response) {
setStatus(error.response.data.message);
} else {
setStatus('Some error occured.');
}
callback(false);
}
);
}, 400);
}}
>
{({ errors, status, touched, isSubmitting, setFieldValue, values }) => (
<Form>
<Label>
<span>Description</span>
<Field
className='mt-1'
as={Input}
name='description'
type='text'
placeholder='Part Element'
/>
<ErrorMessage name='name'>
{(msg) => <HelperText valid={false}>{msg}</HelperText>}
</ErrorMessage>
</Label>
<Label>
<span>Percentage</span>
<Field
className='mt-1'
as={Input}
name='percentage'
type='number'
placeholder='%'
/>
<ErrorMessage name='percentage'>
{(msg) => <HelperText valid={false}>{msg}</HelperText>}
</ErrorMessage>
</Label>
<Label>
<span>Search Field</span>
<div className='relative text-gray-500 focus-within:text-purple-600 dark:focus-within:text-purple-400'>
<Input
className='mt-1 pl-10 text-black dark:text-gray-300'
placeholder='Jane Doe'
onChange={(event) => {
setSearchTerm(event.target.value);
}}
/>
<div className='absolute inset-y-0 flex items-center ml-3 pointer-events-none'>
{iconSelection ? (
<SearchIcon className='w-5 h-5' aria-hidden='true' />
) : (
<AddIcon className='w-5 h-5' aria-hidden='true' />
)}
</div>
</div>
</Label>
<Label className='mt-4'>
<span>Multiselect</span>
<Field
className='mt-1'
as={Select}
name='material'
multiple={true}
type='text'
onChange={(evt) =>
setFieldValue('material', evt.target.selectedOptions.val)
}
>
{tempArray
.filter((value) => {
if (searchTerm === '') {
return value;
} else if (
value.name.toLowerCase().includes(searchTerm.toLowerCase())
) {
return value;
}
})
.map((i) => (
<option key={i.name} val={i.value}>
{i.name}
</option>
))}
</Field>
</Label>
{status && <HelperText valid={false}>{status}</HelperText>}
</Form>
)}
</Formik>
);
}
export default CreateElementForm;