How to update a SharePoint row instead of creating a new one?

I am using the PnP DateTimePicker web part in SPFx, and the following code works great. When I select a new date in the DateTimePicker, it saves the date to a SharePoint list. However, every time I do this, a new row is created. How can I update the existing row instead of creating a new one?

import * as React from 'react'; import styles from './PnpDatePicker.module.scss'; import type { IPnpDatePickerProps } from './IPnpDatePickerProps'; import {DateConvention, DateTimePicker} from "@pnp/spfx-controls-react/lib/DateTimePicker" import { DayOfWeek } from '@fluentui/react'; export default class PnpDatePicker extends React.Component<IPnpDatePickerProps> { public render(): React.ReactElement<IPnpDatePickerProps> { return ( <div className={styles.pnpDatePicker}> <DateTimePicker label="Datumfilter" dateConvention={DateConvention.Date} formatDate={(date: Date) => date.toLocaleDateString()} firstDayOfWeek={DayOfWeek.Monday} isMonthPickerVisible={false} onChange={this.handleChanged} ></DateTimePicker> </div> ); } public async handleChanged(date:any) { await sp.web.lists.getByTitle("DatePicker").items.add({ 'CustomDate':date} ) } }