1. When ever we choose the first option in the first dropdown and go on to select the second option in the second dropdown the second dropdown is not showing any value for us. And the value of the first dropdown is getting updated with it's second value.

This is what you telling the code to do with calling the function

const handleChange = (event) => {
  setReview(event.target.value);
};

In the moment you are changing the option, the review value gets updated; thus, the value in your first dropdown is changing, not the option value from your second dropdown.

2. When we add the other set of dropdowns the problem 1 is there and with that above problem the values of the first dropdown are getting in sync with all of the first dropdowns.

This is, what you tell the system to do, too. Because you are just updating a string state that you declared with const [review, setReview] = useState("");

As you noticed, the problem is two-faced here. The approach would be that you 1) ensure you are updating the right value (review or option) and 2) that you save the updated values within the arrays you already created and that you populate with another object once you click on the "+ add more" button, meaning those to arrays:

const [reviewInput, setReviewInput] = useState([{ review: "" }]);
const [reviewOption, setReviewOption] = useState([{ option: "" }]);  

What means, in order to update the review input array, you can do the following:

const handleChangeReviewInput = (event, index) => {
    setReviewInput([
      ...reviewInput.map((item, key) =>
        key === index ? { review: event.target.value } : item
      )
    ]);
  };

The function is checking for the position in the array you try to change. If found: update the input with the given value.

In your dropdown rendering:

<Select
  labelId="demo-simple-select-standard-label"
  id="demo-simple-select-standard"
  value={reviewInput.review} // taking the review string of your item in the array
  onChange={(e) =>
    handleChangeReviewInput(e, index) // passing the index (position in the array)
  }
  label="Review"
>...</Select>

And similar you can do with your review options:

const handleChangeOption = (event, index) => {
  setReviewOption([
    ...reviewOption.map((item, key) =>
      key === index ? { option: event.target.value } : item
    )
  ]);
};

and

<Select
  labelId="demo-simple-select-standard-label"
  id="demo-simple-select-standard"
  value={item.option} // taking option string from your item in the array
  onChange={(e) => handleChangeOption(e, index)} // passing index
  label="Option"
>...</Select>

See the working version: https://codesandbox.io/s/jovial-greider-9uthk?file=/src/App.js

In general you might want to consider to have one array for both, your review input and your review option; and then have one function to update either the review input or the option.