React DOM Exception error after removing dom child item

Main Issue: When The personal state changes right after I remove task's (removing li item from ul) client encounters (note I am new to react) :

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

The above error occurred in the <li> component:
at li
at ul
at section
at div
at Tasks (http://localhost:3000/static/js/bundle.js:796:5)
at div
at MyComponent (http://localhost:3000/static/js/bundle.js:195:86)
at RenderedRoute (http://localhost:3000/static/js/bundle.js:40022:5)
at Routes (http://localhost:3000/static/js/bundle.js:40488:5)
at Router (http://localhost:3000/static/js/bundle.js:40426:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:38680:5)
at App
at div
at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

This is the code example

const Tasks = ({ page, personal }) => { const workTasks = useMemo(()=>{
const data = JSON.parse(localStorage.getItem("Tasks"))
return data.filter((item)=> item.properties.personal !== true)},[])

const personalTasks = useMemo(()=>{
const data = JSON.parse(localStorage.getItem("Tasks"))
return data.filter((item)=> item.properties.personal === true)},[])

The code above takes the current page(home) and personal(boolean) from parent component.
The personal state is used to add personal or work tasks. Then we render a list of either work or personal as our personal state.

after adding I attempt to build a removeFucntion to remove task item (li) either using filter() or removing the li node child directly with its id which is the tasks name.

code for removing the li element from the ul:

function removeItem(tasks,index) {
const li = document.getElementsByClassName(tasks.task).item(0)
if(li) li.parentNode.removeChild(li)
deleteTask(tasks) //this removes the the item from localStorage 

}

code for rendering ul(tasks):

  <section>
    {personal === true && page === 'home' ?
     <ul id='Personaltasks'>
      { personalTasks.map((tasks, index) =>
      ( <li key={index} className={tasks.task} > <InlineEdit properties={tasks} value={tasks.task} setValue={setTask} />
      <img href='/' alt={'✖'} onClick={()=> removeItem(tasks,index)} />
      </li>))
      }
    </ul>
    :
    <ul id='Worktasks'>

    { workTasks.map((tasks, index) =>
      ( <li key={index} className={tasks.task} > <InlineEdit properties={tasks} value={tasks.task} setValue={setTask} />
      <img href='/' alt={'✖'} onClick={()=> removeItem(tasks,index)} />
      </li>))
      }
    </ul>}
  </section>

I recommend a few things

1. Never reference the DOM or it's functions in React (getElementsByClassName, removeElement, etc). That's the behaviour React should be doing for you. Your JSX updates when your variables update.
2. I'm not sure your uses of UseMemo() are doing anything useful. I've updated this behaviour below to be a bit more readable.
3. Maybe use name or a uniquely identifying property as a param for your removeTask function.
4. Never use onClick() except for inside a <button /> tag. Good news though: you can wrap your <img /> tags in a button. See here why you should be careful with onClick.

Here's an example solution I built:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import { useState, useMemo } from 'react';
export const MyComponent = ({ personal = true, page = 'home' }) => {
const [tasks, setTasks] = useState(JSON.parse(localStorage.getItem('Tasks')) || []);
const personalTasks = useMemo(() => tasks.filter(item => item.properties.personal), [tasks]);
const workTasks = useMemo(() => tasks.filter(item => !item.properties.personal), [tasks]);
function removeTask(name) {
setTasks(tasks.filter(item => item.name !== name));
}
return (
<section>
{personal && page === 'home' ? (
<ul id="Personaltasks">
{personalTasks.map((task, index) => (
<li key={index} className={task.name}>
{' '}
<InlineEdit properties={task} value={task.name} setValue={() => {}} />
<button type="button" onClick={() => removeTask(task.name)}>
<img href="/" alt={'✖'} />
</button>
</li>
))}
</ul>
) : (
<ul id="Worktasks">
{workTasks.map((task, index) => (
<li key={index} className={task.task}>
{' '}
<InlineEdit properties={task} value={task.name} setValue={() => {}} />
<button type="button" onClick={() => removeTask(task.name)}>
<img href="/" alt={'✖'} />
</button>
</li>
))}
</ul>
)}
</section>
);
};

<!-- end snippet -->

Let me know if that's any good!