Component Options do not update when the state changes

Describe the bug: When options state is updated, the dropdown do not show the new value.

To Reproduce:

import React, { useState } from "react";
import MultiSelect from "react-multi-select-component";
import "./styles.css";
export default function App() {
  const [selected, setSelected] = useState([]);
  const [options, setOptions] = useState([
    { label: "Grapes 🍇", value: "grapes" }
  ]);
  const AddOption = () => {
    setOptions([ { label: "Mango 🥭", value: "mango" },
    { label: "Strawberry 🍓", value: "strawberry" }
  ]);
  };
  return (
    <div>
      <h1>Select Fruits</h1>
      <p>{JSON.stringify(options)}</p>
      <MultiSelect
        options={options}
        value={selected}
        onChange={setSelected}
        labelledBy={"Select"}
      />
      <button onClick={AddOption}> Add option </button>
    </div>
  );
}

This only happens from version 4.0.2 onwards. No issue with version 4.0.1

Sample Code using Version 4.0.3 https://codesandbox.io/s/react-kerl-bug-0hm06?file=/src/App.js

Desired behaviour: When Option state changes, component should reflect the state just like in version 4.0.1

[wongCH]

@harshzalavadiya thank you so much.

[wongCH]

Hi @harshzalavadiya ,

When page first load, the Option only have Grape:

Picture above depicts the Option state that only contains “Grape” using version 4.0.3

To simplified my scenario,i wrote a function to overwrite the Option to the following: "[{"label":"Mango 🥭","value":"mango"},{"label":"Strawberry 🍓","value":"strawberry"}]"

Unfortunately, the dropdown component do not reflect the new values after i tried to add into the Option state Picture above depicts the Option state been replace with Mango and strawberry but the Dropdown component still show Grape using version 4.0.3

Below is the picture when i change the version to 4.0.1 that work.