React rerendersa all inputs on one input state change, killing all performance and making experience laggy

Question

I'm developing some selected products manager and encountered a problem i can't think of solution by myself. I have main state with all the data from api. It looks like array of

{
"img_url": "http://localhost/wp-content/uploads/2022/12/g",
"productTitle": "Test",
"productId": "17",
"inputs": [
    {
        "inputTitle": "Text",
        "inputType": "text",
        "inputValue": "Test",
        "id": "133"
    },
    {
        "inputTitle": "SELECT",
        "inputType": "select",
        "inputValues": [
            "1",
            "2",
            "3",
            "4"
        ],
        "inputValue": "3",
        "id": "134"
    }
],
"inputsValues": [
    {
        "inputValue": "Test"
    },
    {
        "inputValue": "3"
    }
],
"orderTitle": "MLF-123",
"unique_id": "1b4b0ad6-b796-4608-bc41-5d6"
}

And inputs have onchange that edits the actual values

onChange={(event) => {
                    const selectedProductsCopy = [...selectedProducts];
                    selectedProductsCopy[selectedProductIndex].inputsValues[
                      inputIndex
                    ].inputValue = event.target.value;
                    setSelectedProducts([...selectedProductsCopy]);
                  }}

The problem i'm focusing is website performance, on onchange every render (there can be up to 50) rerenders, and i can't think of solution because i'm still not very experienced with render optimization. All i can add to this is the profiler with rerender data.

If you can help me and need any additional data please comment, ill answer shortly.