onChange access funtion not working in react js - reactjs

Question

I have this toggle react component. I am trying to access handleChangeTogle when i click on the Toggle but call is not reaching handleChangeTogle.
What am i doing wrong here?
const handleChangeTogle = () => {
setdomestic_voilence(!domestic_voilence);
};
<Toggle
checked={domestic_voilence}
text="Is Active"
onChange={() => handleChangeTogle}
offstyle="btn-danger"
onstyle="btn-success"
/>
import React from "react";
function Toggle(props) {
console.log(props);
const {
text,
size = "default",
defaultChecked,
disabled,
onChange,
offstyle = "btn-danger",
onstyle = "btn-success",
} = props;
let displayStyle = defaultChecked ? onstyle : offstyle;
return (
<>
<label>
<span className={` switch-wrapper`}>
<input
type="checkbox"
// checked={defaultChecked}
// onChange={(e) => onChange(e)}
/>
<span className={`${displayStyle} switch`}>
<span className="switch-handle" />
</span>
</span>
{/* <span className="switch-label">gyyghiyg</span> */}
</label>
</>
);
}
export default Toggle;

Answer 1

I tested your problem and solved it this way. (I used typescript with React. You can remove Interface and types).
Toggle.tsx
import React from "react";
import { ToggleInterface } from './interfaces';
const Toggle = ({ text, handleChange, offstyle, onstyle }: ToggleInterface) => {
return (
<>
<label>
<span className={`switch-wrapper`}>
<input
type="checkbox"
onChange={(e) => handleChange(e)} />
<span className="switch">
<span className="switch-handle" />
</span>
</span>
</label>
</>
);
}
export default Toggle;
App.tsx
const handleChangeToggle = () => {
console.log("handleChangeToggle is worked !!");
};
return (
<div className="App">
<Toggle
text="Is Active"
handleChange={() => handleChangeToggle() }
offstyle= "btn-danger"
onstyle= "btn-success"
/>
);
}
export default App;
interface.ts
export interface ToggleInterface {
text: string,
handleChange: Function,
offstyle: string,
onstyle: string
}