Formik: Nested Object Update - Updating Field Within Nested Object Instead of Creating Separate Objects

Question

In a React application using Formik, I have a nested object structure representing hardware parts within a form.

export const formValues = {
  client: {
    firstName: '',
    lastName: '',
    email: '',
    phoneNumber: '',
  },
  specification: {
    machineMake: '',
    machineModel: '',
    machineSerial: '',
    machinePhoto: null, // Store photo as a File object
    hardwareParts: {
      hdd: {
        _name:"hdd",
        label: 'HDD/SSD',
        serial: '',
        photo: null,
      },
      ram: {
        _name:"ram",
        label: 'RAM',
        serial: '',
        photo: null,
      },
      rom: {
        _name:"rom",
        label: 'ROM',
        serial: '',
        photo: null,
      },
      pin: {
        _name:"pin",
        label: '3-Pin',
        serial: '',
        photo: null,
      },
      adapter: {
        _name:"adapter",
        label: 'Adapter',
        serial: '',
        photo: null,
      },
      battery: {
        _name:"battery",
        label: 'Battery',
        serial: '',
        photo: null,
      },
      // You can add more hardware parts here following the same structure
    },
    machineCondition: ''
  },

} 

I want to update the photo field for a specific hardware part when a user uploads an image. However, when using formik.setFieldValue with a path like

specification.hardwareParts.${part}.photo

a separate object with just the photo property is created outside the existing hardware part object in formik.values. How can I achieve the desired behavior of updating the photo field directly within the existing hardware part object?

I tried this:

const handlePhotoUpload = (event, part) => {
        console.log("part",part)
        const file = event.target.files[0];
         if (file) {
           const reader = new FileReader();
           reader.readAsDataURL(file);
           reader.onloadend = () => {
            const base64Data = reader.result.split(',')[1]; // Extract base64 data
             if (part) {
                console.Consolelog
               formik.setFieldValue(`specification.hardwareParts.${part}.photo`, base64Data); //update here
             } else {
               formik.setFieldValue('specification.machinePhoto', base64Data);
             }
          };
         }
      };

and expected output:

hdd : {_name: 'hdd', label: 'HDD/SSD', serial: '', photo: '/9j/4f98RXhpZgAASUkqAAgAAAATAAABAwABAAAAoA8AAAEBAw…CAAAAAAABCjYAAAAjAAAAAAChChMAAAATAAAAJAAAAFNFRlQ='} 

current output

hardwareParts
: {
battery: 
{_name: 'battery', label: 'Battery', serial: '', photo: null},
hdd
: 
{_name: 'hdd', label: 'HDD/SSD', serial: '', photo: null},
object Object
: 
{photo: '/9j/4f98RXhpZgAASUkqAAgAAAATAAABAwABAAAAoA8AAAEBAw…CAAAAAAABCjYAAAAjAAAAAAChChMAAAATAAAAJAAAAFNFRlQ='}}