How to remove eslint warning "react-perf/jsx-no-new-function-as-prop" using typescript and react?

i am new to programming and currently learning typescript. i have a piece of code like below,

<Modal
    id={modalId}
    onCompleted={data => { //eslint error here
        setVariables(prev=> [
           ...prev.filter(item => item.id !== modalId),
           data,
        ]);
        setModalOpen(false);
    }}
 />

i tried to do like so

const handleOnCompleted = React.useCallback((data) => {
    setVariables(prev=> [
        ...prev.filter(item => item.id !== modalId),
        data,
    ]);
    setModalOpen(false); 
}, [setVariables, setModalOpen]);


<Modal
    id={modalId}
    onCompleted={handleOnCompleted(data)} //is this right way of passing data?
/>

I am unsure how to pass data to handleOnCompleted method. could someone help me with this