title: TypeError: changeChecked is not a function
body: <p>I am trying to pass changeChecked as prop from parent to this child component to capture the input element id but I am getting this error. I have mentioned the child component and parent component. Please help me to solve this error.</p>
  <p>Child Component</p>
  <pre><code>import { useState, useEffect } from 'react';
  
  const CheckBox = ({ changeChecked, section }) =&gt; {
  
  
      return (
          &lt;&gt;
              {section.options.map((option, optionIdx) =&gt; (
                  &lt;div key={option.value} className=&quot;flex items-center&quot;&gt;
                      &lt;input
                          id={`filter-${section.id}-${optionIdx}`}
                          name={`${section.id}[]`}
                          defaultValue={option.value}
                          type=&quot;checkbox&quot;
                          defaultChecked={option.checked}
                          onChange={() =&gt; changeChecked(option.id)}
                          className=&quot;h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500&quot;
                          
                      /&gt;
                      &lt;label
                          htmlFor={`filter-${section.id}-${optionIdx}`}
                          className=&quot;ml-3 lg:text-sm min-w-0 flex-1 text-gray-500&quot;
                      &gt;
                          {option.label}
                      &lt;/label&gt;
                  &lt;/div&gt;
              ))}
              
          &lt;/&gt;
      )
  }
  
  export default CheckBox;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/AFm67.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AFm67.jpg" alt="enter image description here" /></a></p>
  <p>Parent Component</p>
  <pre><code>import CheckBox from &quot;../pages/collections/checkbox&quot;
  export default function App() {
  
  
  const filters = [
      {
          id: 'brand',
          name: 'Brands',
          options: [
              { value: 'Casio', label: 'Casio', checked: false },
              { value: 'Yamaha', label: 'Yamaha', checked: false },
          ],
      },
  ]
  
    const onChangeChecked = (id)=&gt;{
      console.log(id)
    }
  
    return (
      &lt;div className=&quot;App&quot;&gt;
   {filters.map((section) =&gt; (
        &lt;CheckBox section={section} changeChecked={onChangeChecked} /&gt;
   ))}
      &lt;/div&gt;
    );
  }
  </code></pre>