a problem with using useRef when click div set State to false

Question

I trying to create a modal pop up with useRef that if you click the background of the modal it will close the popup/setModal to false but for some reason the useRef that I created even if I click outside or inside the modal it will still close the modal pop up.

User.jsx

import { useState } from "react";
import EditUser from "../Components/EditUser";

const User = () => {
  const [ modal ,setModal] = useState(false)

return (
    <>
        <button onClick={()=>setModal(true)}>Edit</button>
        {modal && <EditUser user={datas} setModal={setModal}/>}
    </>
    )
}

export default User;

EdtiUser.jsx

import { useEffect, useRef } from "react"
import "./edituser.css"

const EditUser = ({user, setModal}) => {

const menuRef = useRef(null);

useEffect(()=>{
    let handler = (event) =>{
        if(!menuRef.current.contains(event.target)){
            console.log(event.target)
            setModal(false)
        }
    }
    document.addEventListener("mousedown", handler)
    return () => {
        document.removeEventListener("mousedown", handler);
      };
},[])

  return (
      <div className="background-modal">
        <div ref={menuRef} className="edit-container">
            <input placeholder="insert name"/>
            <input placeholder="insert email"/>
            <select>
                <option>Male</option>
                <option>Female</option>
            </select>
            <button>Edit</button>
        </div>
    </div>
  )
}

This code should setModal to false if user click on the div that aren't same as the useRef current. can someone help me? thanks