How to remove element in react hook?

Question

React

Hello. I want to delete an element, but something doesn't work. I have tried different versions of the code.
Now I have registered a static id for an example in a reducer (for some reason it is impossible to make a normal key through a map), which adds a message. This id comes in props. I'm adding a message, but I can't delete it. I get errors like `message.filter is not a function`.
I would be extremely grateful if someone gives a working example and explains how it would be possible to do such a thing.
The code itself:

const PostEdit = (props) => {
  let [editMode, setEditMode] = useState(false);
  let [message, setMessage] = useState(props.message);
  useEffect(() => {
    setMessage(props.message);
  }, [props.message]);


  const activateEditMode = () => {
    setEditMode(true);
  };

  const deactivateEditMode = () => {
    setEditMode(false);
  };

  const onMessageChange = e => {
    setMessage(e.currentTarget.value);
  };

  const deleteMode = id => {
    (setMessage(message.filter(el => el.id != 1));
  };

  return (
    <div>
    {message.split('', 1).map(el => (
     <div id={el.id}>
      {!editMode && (
        <div>
          <span>
            {message ? message : props.message}
          </span>
          <div>
            <button className={style.button_edit} onClick={activateEditMode}>
              edit message
            </button>
          </div>
              <div >
            <button className={style.button_delete} onClick={() => {deleteMode(el.id)}}>
              delete
            </button>
          </div>
        </div>
      )}

      {editMode && (
        <div>
          <textarea
          />
          <div>
            <button className={style.button_save} onClick={deactivateEditMode}>
              save
            </button>
          </div>
        </div>
      )}
    </div>
    ))}
    </div>
  )
}