[Bug] - Select Dropdown has binding issue when new search fields are selected

[vangakirankumarreddy]

Component FwSelect

Describe the bug Previous Selected Fields are hidden

To Reproduce Go to Select, Make sure you have the default value selected before Search for Characters A new List of Items will be visible, and select the new value from the pop-over

Expected behavior A clear and concise description of what is expected to happen.

Screenshots If applicable, add screenshots to help explain the issue.

Additional context Add any other context about the bug here.

Demo Issue :

https://github.com/freshworks/crayons/assets/94836700/cc909e82-00f0-4d47-abbe-5128efe460d0

Issue Code

import React, { useEffect, useRef } from 'react';
import { FwSelect } from '@freshworks/crayons/react';

const characters = [
  {
    id: 1,
    name: 'John Doe',
    age: 30,
    occupation: 'Engineer',
    graphicsProps: {
      image: 'https://rickandmortyapi.com/api/character/avatar/1.jpeg',
    },
    value: '1',
  },
  {
    id: 2,
    name: 'Jane Smith',
    age: 25,
    occupation: 'Designer',
    graphicsProps: {
      image: 'https://rickandmortyapi.com/api/character/avatar/1.jpeg',
    },
    value: '2',
  },
  {
    id: 3,
    name: 'Michael Johnson',
    age: 40,
    occupation: 'Manager',
    graphicsProps: {
      image: 'https://rickandmortyapi.com/api/character/avatar/1.jpeg',
    },
    value: '3',
  },
  {
    id: 4,
    name: 'Emily Brown',
    age: 28,
    occupation: 'Developer',
    graphicsProps: {
      image: 'https://rickandmortyapi.com/api/character/avatar/1.jpeg',
    },
    value: '4',
  },
  {
    id: 5,
    name: 'William Lee',
    age: 35,
    occupation: 'Writer',
    graphicsProps: {
      image: 'https://rickandmortyapi.com/api/character/avatar/1.jpeg',
    },
    value: '5',
  },
  {
    id: 6,
    name: 'Rick Sanchez',
    subText: 'Human',
    graphicsProps: {
      image: 'https://rickandmortyapi.com/api/character/avatar/1.jpeg',
    },
    value: '6',
  },
];

// Simulate an API call to search for characters based on a search query
function searchCharacters(query) {
  return new Promise((resolve, reject) => {
    // Simulate API delay with setTimeout
    setTimeout(() => {
      // Filter characters based on the search query
      const filteredCharacters = characters.filter((character) =>
        character.name.toLowerCase().includes(query.toLowerCase())
      );

      resolve(filteredCharacters);
    }, 1000); // Simulate 1-second delay
  });
}

import './App.css';
function Select() {
  const searchFn = (value) => {
    return searchCharacters(value)
      .then((result) => {
        console.log(result);
        return result.map((x) => {
          return {
            ...x,
            text: x.name,
            subText: x.type,
            graphicsProps: { image: x.image },
          };
        });
      })
      .catch((error) => {
        console.error(error);
      });
  };
  return (
    <FwSelect
      id="dynamicSelect"
      label={'Rick & Morty Characters'}
      noDataText="Type to search.."
      notFoundText="Not available in this universe"
      placeholder="Your choices"
      hintText="Select multiple options"
      optionsVariant="avatar"
      tagVariant="avatar"
      search={searchFn}
      multiple
      selectedOptions={[
        {
          text: 'Rick Sanchez',
          subText: 'Human',
          value: '1',
          graphicsProps: {
            image: 'https://rickandmortyapi.com/api/character/avatar/1.jpeg',
          },
        },
      ]}
    ></FwSelect>
  );
}
export default Select;

[rihansiddhi]

@vangakirankumarreddy Kindly check the value of character list and the selected value. As the first character "John Doe" and the selected value "Rick Sanchez" has the same value (in this case: 1), the selected value will be removed when you click on the character with the same value.