MUI Select box with disabled options performance issue

[Max-LAB]

Hi all, I am doing a personal project and need your help with this. I don't know how to approach problems without having performance issues. I think the issue is because of my lack of understanding of some parts of react-hook-form so that's why I need your help

Problem description:
In the project, I have created a reusable/separate MUI select box component which I am using inside useFieldArray. The requirement is that Inside this list I am not allowed to have the same option selected twice. In this case, when the option is selected for some upper array element, I can not be able to select it again.

The list of options inside the select box came from an external API and the only way to know what is already selected is to take a look at what is inside useFieldArray.

My approach, which you can see in CodeSandbox is causing me performance issues while every time I select something, the entire form is re-rendered. I have an example with 40 elements in the array and when I click on choose any available option in the select box it will update the entire form and the experience becomes laggy.

How to reproduce:

1. Open CodeSandbox example
2. Click on one of the select boxes and choose an available value
3. Watch the console log that I am longing from SelectComponent and also TextInputComponent

Notices:

• implementation behind useWatch inside the Select component is better in real code, this is just an example
• I used useWatch to solve this, I am not sure that I am on the right way in here, so that's why this question and my search for help

Also worth mentioning:

• in my project, I am using RHF v7.45.4
• I am using ZOD for validation which I did not include in the CodeSandbox example just for simplicity. I presume it is not causing performance issues.

Conclusion:
Any help is more than welcome. Change in perspective and using another approach also.

CodeSandbox:
https://codesandbox.io/s/priceless-greider-2kc6xy

EDIT:
I extended my example with more options and also opened a StackOwerflow issue/question for this.

https://stackoverflow.com/questions/77321311/mui-select-box-inside-react-hook-form-usefieldarray-problem

[Max-LAB]

@bluebill1049 sorry for pinging you like this, but I think you can provide the best approach or insight to this for me.