Select input not changing

Question

So something related to this question was answered yesterday but I tried another method and I am still not getting it. I have a select input like this

<VStack align={'start'} gap='10px' mt='15px'>
   <label htmlFor="">Subscription Duration</label>
   <Select name='subscriptionDuration' onChange={handleInputChange}>
      <option value={'weekly'}>Weekly</option>
      <option value={'monthly'}>Monthly</option>
   </Select>
 </VStack>

I am storing it in this usestate

const [foodTemplateDetails, setFoodTemplateDetails] = useState({
description: "",
subscriptionDuration: "weekly",

});

and then I am trying to set it here

setFoodTemplateDetails((prevDetails) => {
  return {
    ...prevDetails,
    [value.name]:
      (
        value.name === 'description'
      ) && value.value.toString(),
    subscriptionDuration:
      value.name === 'subscriptionDuration' ? value.value = 'weekly' : prevDetails.subscriptionDuration
  }
})

but the select values are not changing in the screen, it is just showing as weekly. If I click on the drop-down and select monthly, it is still weekly that will show. I figured the conditional rendering I am doing is the cause but I do not know what to write to make the selected values to change. can anyone help me on this?

Answer 1

I just figured it out, so I changed the conditional rendering to this

subscriptionDuration:
   value.name === 'subscriptionDuration' ? value.value : ''

and it worked. Thanks!