Unmount a component with react functions - reactjs

Question

I want to remove a component from itself. So I tried creating a function in its parent and calling it from the component
I have an array with the states and I tried unmounting by removing the component from the array.
This is the parent. unmount is the function
import React, { useEffect } from "react";
import "./list.css";
import List_item from "./listitem";
function List(prop) {
const unmount = (what_to_unmount) => {
prop.itemremove(prop.items.pop(what_to_unmount));
};
let i = 0;
if (prop.items.length === 0) {
return <div></div>;
} else {
return (
<div className="list_item">
{prop.items.map((item) => {
if (item !== "") {
return <List_item name={item} unmount={prop.unmount} />;
} else {
return <div></div>;
}
})}
</div>
);
}
}
export default List;
I want to unmount this function on a button click
import React, { useEffect } from "react";
import { useState } from "react";
import "./listitem.css";
import DeleteIcon from "#material-ui/icons/Delete";
function List_item(props) {
const [check, setcheck] = useState(false);
useEffect(() => {
let checkbox = document.getElementById(`checkbox${props.name}`);
if (checkbox.checked) {
document.getElementById(props.name).style.textDecoration = "line-through";
} else {
document.getElementById(props.name).style.textDecoration = "none";
}
});
return (
<div>
<div className="item">
<span className="text" id={`${props.name}`}>
{props.name}
</span>
<div>
|{" "}
<input
type="checkbox"
id={`checkbox${props.name}`}
checked={check}
onClick={() => setcheck(!check)}
></input>{" "}
|
<span className="delete">
<DeleteIcon
onClick={() => {
props.unmount(props.name);
}}
/>
</span>
</div>
</div>
<hr className="aitem" />
</div>
);
}
export default List_item;
But it does not work.
Please help.