How to remove several unnecessary keys from an object?

Question

React

the Draggable component creates props that are passed to the Legend component, so I myself pass contoursLegend and wellsLegend as props to the Legend component. How can I delete the wellsLegend and contoursLegend keys in the Legend in the props object?

const contoursLegend = useSelector(getContoursLegend);
  const wellsLegend = useSelector(getWellsLegend);
 <Draggable>
        <Legend contoursLegend={contoursLegend} wellsLegend={wellsLegend}/>
</Draggable>

in the Legend component, I tried deleting it, but it doesn't work

const newProps = {...props}

  const rootProps = Object.keys(newProps).forEach(
    item => (item === 'contoursLegend' || item === 'wellsLegend') && delete newProps[item],
  );

return (
<div {...rootProps}> ... </div>
)

Answer 1

What for?
It is more logical to pass a fixed set of props to the div, and get the props by destructuring.
If there are too many of them, then you should use something like
https://lodash.com/docs/4.17.15#omit
Well, or do const newProps = {...props} and remove the extra from newProps
but the option with omit or newProps may be poorly maintained