Im just trying to remove the list item from the list using onClick with a button. I was following a book called Road to React but it still doesn’t update the state of the list(returns new list without the deleted item).It appears to me that im doing something wrong in the removePerson function and using the filter function but I just cant wrap my head around what it is.

``import React from 'react';
import { useEffect, useState } from 'react';

const ljudi = [
{
id: '1',
ime: 'Deni',
prezime: 'Ivančok',
dob: 24,
},

{
id: '2',
ime: 'Ana',
prezime: 'Fišer',
dob: 21,
},

{
id: '3',
ime: 'Fran',
prezime: 'Fišer',
dob: 21,
},
];
function App() {

const [tekst, settekst] = useState('');

const TekstHandler = (event) => {
settekst(event.target.value);
};

const [people, setPeople] = useState(ljudi);

const removePerson = (personToDelete) => {
const newPeople = people.filter(
(person) => personToDelete !== person
);
setPeople(newPeople);
};

return (
<>

<h1>TIPKE</h1>

</>
);
}

const Tekst = ({ backcolor, color, text, children }) => {
return (
<>
<div>
{children}
<p
style={{
backgroundColor: backcolor,
color: color,
fontSize: '150px',
textAlign: 'center',
display: 'block',
marginLeft: 'auto',
marginRight: 'auto',
}}
\>
{text}

</p>

</>
);
};

const Tipka = (
{ bojice } //destrukturirano
) => (
<>
<button id="tipka-za boju" onClick={bojice}>
Klikni za promjenu boje
</button>
</>
);

const Lista = ({ lista, removePerson }) =>
lista.map(
(covjek) => <Covjek covjek={covjek} removePerson={removePerson} />

);

const Covjek = ({ covjek, removePerson }) => {
return (
<>
<div id="lista">

<ul>
<li>{covjek.id}</li>
<li>{covjek.ime}</li>
<li>{covjek.prezime}</li>
<li>{covjek.dob}</li>
</ul>
 removePerson(covjek)}>
Delete


</>
);
};

export default App;`