Untitled

		{modalStepper.steps[activeStep].products.length > 0 &&
								modalStepper.steps[activeStep].products.map((product, index) => (
									<Paper
										elevation={4}
										sx={{
											display: 'flex',
											flexDirection: 'row',
											gap: 1.5,
											p: 2,
											mt: 2,
										}}
									>
										<Controller
											control={control}
											name={`steps.${activeStep}.inputs.${index}.value`}
											render={({ field: { onChange, value } }) => (
												<TextField
													value={value}
													placeholder='Enter category name'
													label='Category name'
													size='small'
													onChange={onChange}
												/>
											)}
										/>

										{/* <Controller
										control={control}
										name={`steps.${activeStep}.inputs.${index}.image`}
										render={({ field: { onChange, value } }) => (
											<label style={{ width: 40, height: 40, marginBottom: '0' }}>
												{typeof value !== 'string' && value ? (
													<img
														src={URL.createObjectURL(value[0])}
														style={{
															height: '100%',
															aspectRatio: '1/1',
															objectFit: 'cover',
														}}
														alt=''
													/>
												) : (
													<img
														src={value || placeholderImg}
														style={{
															height: '100%',
															aspectRatio: '1/1',
															objectFit: 'cover',
															border: 'solid 1px rgba(0,0,0,0.23)',
															borderRadius: 4,
														}}
														alt=''
													/>
												)}
												<input
													type='file'
													hidden
													{...register(`steps.${activeStep}.inputs.${index}.image`)}
												/>
											</label>
										)}
									/> */}
									</Paper>
								))}