How can I pass the changed values in child props to the parent state?

export const EditFirstEventProps = ({ items, id }: IEditFirstEventProps) => {
  const [itemsState, setItemsState] = useState<FirstEventValues>(items)

  const {
    handleSubmit,
    refineCore: { onFinish },
  } = useForm<HttpError>({
    shouldUseNativeValidation: true,
    refineCoreProps: {
      resource: 'customergroups/detail',
      action: 'edit',
    },
  })

  useEffect(() => {
    setItemsState(items)
  }, [items])

  const onSubmit = async () => {
    onFinish(itemsState)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Box sx={{ display: 'flex', alignItems: 'center', marginBottom: 1 }}>
        <TextField
          required={true}
          label={'1회차 이상'}
          variant="outlined"
          size="small"
          disabled={itemsState.first_event_status === 'T'}
          value={itemsState.first_event || 0}
          onChange={(e) => {
            setItemsState({
              ...itemsState,
              first_event: parseInt(e.target.value),
            })
          }}
        />
...

export const EditFirstEventProps = ({ items, id }: IEditFirstEventProps) => {
  const [itemsState, setItemsState] = useState<FirstEventValues>(items)

  const {
    handleSubmit,
    refineCore: { onFinish },
  } = useForm<HttpError>({
    shouldUseNativeValidation: true,
    refineCoreProps: {
      resource: 'customergroups/detail',
      action: 'edit',
    },
  })

  useEffect(() => {
    setItemsState(items)
  }, [items])

  const onSubmit = async () => {
    onFinish(itemsState)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Box sx={{ display: 'flex', alignItems: 'center', marginBottom: 1 }}>
        <TextField
          required={true}
          label={'1회차 이상'}
          variant="outlined"
          size="small"
          disabled={itemsState.first_event_status === 'T'}
          value={itemsState.first_event || 0}
          onChange={(e) => {
            setItemsState({
              ...itemsState,
              first_event: parseInt(e.target.value),
            })
          }}
        />
...

  const [firstEvent, setFirstEvent] = useState<FirstEventValues>({ first_event: 0, first_event_status: 'F' })

...
<Grid item xs={24} sm={24} md={24} lg={24} xl={10}>
            <Card sx={{ paddingX: { xs: 4, md: 2 }, display: 'flex', flexDirection: 'row' }}>
              <Box sx={{ width: 250 }}>
                <CardHeader title={'첫구독 혜택'} />
              </Box>
              <Box sx={{ marginTop: 2 }}>
                <CardContent sx={{ md: 3, pt: 0 }}>
                  <EditFirstEventProps items={firstEvent} id={groupNo} />
                </CardContent>
              </Box>

  const [firstEvent, setFirstEvent] = useState<FirstEventValues>({ first_event: 0, first_event_status: 'F' })

...
<Grid item xs={24} sm={24} md={24} lg={24} xl={10}>
            <Card sx={{ paddingX: { xs: 4, md: 2 }, display: 'flex', flexDirection: 'row' }}>
              <Box sx={{ width: 250 }}>
                <CardHeader title={'첫구독 혜택'} />
              </Box>
              <Box sx={{ marginTop: 2 }}>
                <CardContent sx={{ md: 3, pt: 0 }}>
                  <EditFirstEventProps items={firstEvent} id={groupNo} />
                </CardContent>
              </Box>