Add a onClick event to a custom 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;