Trouble Understanding React.memo on a Component

Question

Please take a look at the following code

// index.jsx
 
import React from 'react';
import {data} from '../../../../data.js';
import List from './List.jsx';
 
const peopleContext = React.createContext();
 
export const usePeopleContext = () => React.useContext(peopleContext);
 
const LowerState = () => {
    const [people, setPeople] = React.useState(data);
    const [count, setCount] = React.useState(0);
    const removePerson = (id) => {
        setPeople(currentState => {
            return currentState.filter(item => item.id !== id);
        });
    }
    return (
        <peopleContext.Provider value={{removePerson}}>
            <section>
                <button className='btn' onClick={() => setCount(currentState => currentState + 1)} style={{marginBottom: '1rem'}}>count {count}</button>
                <List people={people}/>
            </section>
        </peopleContext.Provider>
    );
};
 
export default LowerState;

// List.jsx
 
import React from 'react';
import Item from './Person.jsx';
 
const List = ({people}) => {
    return (
        <div>
            {people.map((person) => {
                return <Item key={person.id} {...person}/>;
            })}
        </div>
    );
};
 
export default React.memo(List);

// Person.jsx
 
import {usePeopleContext} from './index.jsx';
 
const Person = ({id, name}) => {
    const {removePerson} = usePeopleContext();
    return (
        <div>
            <h4>{name}</h4>
            <button onClick={() => removePerson(id)}>REMOVE</button>
        </div>
    );
};
 
export default Person;

I am getting the pointless re-rendering of the list when I click the button. I understand that I'm suppose to use the React.useCallback method so that React remembers something so it does not recreate it from scratch. But how would that work for this case? The people={people} (from index.jsx) is whats changing thus the re-render (I think?). So I put the state inside of the useCallback but got another error. How does one go about fixing this? (I did try fixing it by putting the React.useCallback method on the removePerson method for the initial render but it still didn't fix the issue).

Tried to fix pointless re-renders by using the React.useCallback method on the removePerson method but it still didn't work. But I don't think thats the problem? Because from my understanding the use of React.memo on the List component means that it will only re-render when the props on that component change (List). And the people={people} is the only prop on it. So shouldn't I apply some type of React.useCallback on the people? Just some guesses.

IMPORTANT This problem of it still re-rendering only happens when I use the context api with it. But if I were to go the annoying prop drilling route and pass it all the way down to person and add the React.useCallback method on the removePerson I don't get that issue. But I want to learn how to make it work if I were to use the context api. IMPORTANT