Add a onClick event to a custom React Component - react-component

Question

I have a React Component ValidationEditor that calls another custom React Component Property, which holds the property value a array of strings.
interface props extends ValidationDataProperty {
tree: Tree;
}
const ValidationEditor = ({ tree, id, ifData, thenData, elseData }: props) => {
const { classes } = useStyles();
const { state, dispatch } = useContext(PropertyContext);
const updateValidation = modifyConditionalProperty(id, dispatch);
return (
<Group className={classes.validator}>
<Box></Box>
<Text>If</Text>
<Property
value={[""]}
mode="edit"
tree={tree}
onClick={(e: { target: { value: SetStateAction<string[]> } }) =>
updateValidation({ ifData: { ...ifData, value: e.target.value } })
}
/>
<NativeSelect
data={_.keys(ComparisonType)}
required
value={ifData.comparison}
onChange={(e: { target: { value: SetStateAction<string> } }) =>
updateValidation({
ifData: { ...ifData, comparison: e.target.value },
})
}
/>{" "}
<TextInput
placeholder="Provide conditional value"
required
value={ifData.value}
sx={{ flex: 1 }}
onChange={(e: { target: { value: SetStateAction<string> } }) =>
updateValidation({ ifData: { ...ifData, value: e.target.value } })
}
/>
</Group>
);
};
export default ValidationEditor;
Now I want to add a onClick event to the Property React Component . Basically onClick I want to call an action -> modifyConditionalProperty(id, dispatch) , that will update the store via a reducer. I am only struggling to make it work only for my custom React component Property rest its working fine.
This is how the Property component looks like
interface PropertyProps {
value?: string[];
mode: "edit" | "display";
tree: Tree;
onClick?: (e: { target: { value: SetStateAction<string[]> } }) => void;
}
const Property = ({ value, mode, tree }: PropertyProps) => {
const [currentValue, setCurrentValue] = useState<string[]>(value || []);
const [displayMode, toggle] = useToggle(mode, ["edit", "display"]);
console.log(value) // ["a", "b", "c"]
return (
<Box>
.....
</Box>
);
};
export default Property;