Hi everyone, so I'm trying to create a custom Component for a ColorPicker, which I'm using in another component inside a form.
I'm pretty sure the form works because I can see the name in the console, but the color is always null. I've attached the ColorPicker component as a text file. Please, if anyone has a solution for this problem I would really appreciate it.

<form action={submitMyForm}>
          <div className='grid gap-4 py-4'>
            <div className='grid grid-cols-4 items-center gap-4'>
              <Label htmlFor='name' className='text-right'>
                Name
              </Label>
              <Input
                id='name'
                name='name'
                placeholder='Name of the mood, eg. happy, sad'
                className='col-span-3'
              />
            </div>
            <div className='grid grid-cols-4 items-center gap-4'>
              <Label htmlFor='color' className='text-right'>
                Color
              </Label>
              <ColorPicker id='color' name='color' />
            </div>
          </div>
          <DialogFooter>
            <Button type='submit'>Save changes</Button>
          </DialogFooter>
        </form>