In React, In Single components inputs re-render all time on change one input value

The issue I’m facing is related to how React handles state updates and re-renders. When you change the value of one field in your form (name, email, or phone), all three input components re-render because they all depend on the same formData state. React re-renders the entire component when the state changes, which is why all inputs re-render, even if only one field’s value has changed.

In below, if you change value of name all 3 input components will be re-render.

const [formData, setFormData] = useState({ name: '', email: '', phone: '';

<FormInput
                    label="Name"
                    placeholder="Enter name"
                    id="name"
                    value={formData.name}
                    onChange={handleChange}
                />

                <FormInput
                    label="Email"
                    placeholder="Enter email"
                    type='email'
                    id="email"
                    value={formData.email}
                    onChange={handleChange}
                />

                <FormInput
                    label="Phone"
                    placeholder="Enter phone"
                    type='number'
                    id="phone"
                    value={formData.phone}
                    onChange={handleChange}
                />

FormInput.jsx

import { forwardRef} from "react";
import { cx } from "../../utils/helper";

export const commonInputCss = "w-full border border-neutral-300 rounded-xl p-4 outline-none text-text-700 placeholder:text-text-disabled bg-white disabled:bg-text-disabled disabled:cursor-not-allowed disabled:opacity-50 disabled:placeholder:text-main-black";

const FormInput = forwardRef(({
    label, type = "text", id, inputCss, ...props
}, ref) => {

    return (
        <div className={cx("relative flex flex-col gap-y-1")}>
            {label && (
                <label htmlFor={id} className={cx(
                    "text-text-700 text-sm text-medium",
                    labelCss
                )}>
                    {label}
                </label>
            )}

            <input
                type={type}
                name={id}
                id={id}
                ref={ref}
                {...props}
                className={cx(
                    commonInputCss,
                    inputCss,
                )}
            />
        </div>
    );
});

export default FormInput;

But, do we need to re-render all to change one property value?