Node.js TypeError：changeChecked 不是函数

我试图将changeChecked作为prop从父组件传递到此子组件，以捕获输入元素id，但我遇到了这个错误.我已经提到了子组件和父组件.请帮我解决这个错误.

子组件

import { useState, useEffect } from 'react';

const CheckBox = ({ changeChecked, section }) => {


    return (
        <>
            {section.options.map((option, optionIdx) => (
                <div key={option.value} className="flex items-center">
                    <input
                        id={`filter-${section.id}-${optionIdx}`}
                        name={`${section.id}[]`}
                        defaultValue={option.value}
                        type="checkbox"
                        defaultChecked={option.checked}
                        onChange={() => changeChecked(option.id)}
                        className="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500"
                        
                    />
                    <label
                        htmlFor={`filter-${section.id}-${optionIdx}`}
                        className="ml-3 lg:text-sm min-w-0 flex-1 text-gray-500"
                    >
                        {option.label}
                    </label>
                </div>
            ))}
            
        </>
    )
}

export default CheckBox;

父组件

import CheckBox from "../pages/collections/checkbox"
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)=>{
    console.log(id)
  }

  return (
    <div className="App">
 {filters.map((section) => (
      <CheckBox section={section} changeChecked={onChangeChecked} />
 ))}
    </div>
  );
}