when loading control Component with custom menuList in react select the input-field is getting shorter

Question

`const MenuList = useCallback( children, ...props }) => { if (props.selectProps.inputValue && !props.options.length) { return ( <div style={{ backgroundColor: '#fff', border: '1px solid #fff', display: 'flex', flexWrap: 'wrap', justifyContent: 'center', alignItems: 'center', width: '99.4%', height: 300, fontSize: '1.2rem', }} >

No companies found

) } const listRef = useRef(null) const childrenArray = Children.toArray(children) let currentIndex = 0

useEffect(() => { if (searchValue.length > 0) { listRef?.current?.scrollToItem(0) else if ((currentIndex + pageSize) * page < childrenArray.length && searchValue.length === 0) { if (listRef.current) { listRef?.current?.scrollToItem((currentIndex + pageSize) * page) } } [currentIndex])

return ( <VirtualizedList listRef={(ref) => { listRef.current = ref }} width={100} listStyle={{ width: '100%' }} items={children} height={300} hasNextPage={props.selectProps.hasNextPage} isNextPageLoading={props.selectProps.isNextPageLoading} loadNextPage={props.selectProps.loadNextPage} itemSize={props.selectProps.itemSize} > index, style }) => { return children[index] ? ( <div style={{ ...style, backgroundColor: '#fff', border: '1px solid #fff', display: 'flex', flexWrap: 'wrap', alignItems: 'center', width: '99.4%', }} > {children[index]} ) : ( <div style={{ ...style, backgroundColor: '#fff', border: '1px solid #fff', display: 'flex', flexWrap: 'wrap', justifyContent: 'center', alignItems: 'center', width: '99.4%', }} >

Loading...

) }} ) }, [companies.length], )

const customStyles = { control: (baseStyles, states) => { return { ...baseStyles, border: 1px solid #858585, fontSize: '.8rem !important', zIndex: '', } }, option: (baseStyles, states) => { return { ...baseStyles, } }, }

return ( <Box position="relative" sx={{ width: '300px' }}> <Select isClearable={true} label={'Select Company'} value={selectedCompany} onChange={handleSetSelectedCompany} options={searchValue.length > 0 ? searchValueArray : companies} hasNextPage={searchValue.length > 0 ? false : hasMore} isNextPageLoading={searchValue.length > 0 ? false : isLoading} loadNextPage={loadMoreRows} itemSize={() => 30} onInputChange={(e) => setSearchValue(e)} inputValue={searchValue} components={{ Control: (props) => Control(props, 'Select Company', false), MenuList, }} /> ) }

virtualized List Code

import React from "react"; import PropTypes from "prop-types"; import { VariableSizeList as List } from "react-window"; import InfiniteLoader from "react-window-infinite-loader";

function VirtualizedList({ children, hasNextPage, isNextPageLoading, items, loadNextPage, listStyle, itemSize, height, width, listRef }) { const itemCount = hasNextPage ? items.length + 1 : items.length; const loadMoreItems = isNextPageLoading ? () => undefined : loadNextPage; const isItemLoaded = index => !hasNextPage || index < items.length;

return ( <InfiniteLoader data-testId="infinite-loader" isItemLoaded={isItemLoaded} itemCount={itemCount} loadMoreItems={loadMoreItems}

>

onItemsRendered, ref }) => { return ( <List ref={currentRef => { if (listRef) { listRef(currentRef); } ref(currentRef); }} width={width} height={height} itemCount={itemCount} itemSize={itemSize} style={listStyle} onItemsRendered={onItemsRendered} className="VirtualizedList-Component" > {listProps => children(listProps)} ); }} ); }

VirtualizedList.propTypes = { hasNextPage: PropTypes.bool, isNextPageLoading: PropTypes.bool, items: PropTypes.array, loadMoreItems: PropTypes.func, listStyle: PropTypes.object, itemSize: PropTypes.func, height: PropTypes.number, width: PropTypes.number, listRef: PropTypes.func, children:PropTypes.any, loadNextPage:PropTypes.any, }; i tried everything according to my knowledge...but what's happening here...somehow when i am loading Control component along with a custom MenuList prop...it is preventing the default input-field to shrink because of which which my search value state is getting updated by only 1 single character at once. and if want to type another character i have to point the cursor again and this cycle is being repeated. any kind of help and Suggestions will be appreciated. thank you in advance.`