Unmount a component with react functions

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.