Filter and data have missing dependency

I have one issue with my code where I need to filter though "id" and this is the error that I get " React Hook useEffect has missing dependencies: ‘data’ and ‘filterData’. Either include them or remove the dependency array. Data is a json file which is inside the project folder.

and this is the code. When i try to console log data is says that data is undefined.

import { Container, Table, Form } from "react-bootstrap";
import { Diff } from "./components/utils";

const MovieCard = ({ title, data, val }) => {
 const [computed, setComputed] = useState(data);
 const [content,setContent] = useState ("");
 const [filterData, setFilterData] = useState("");

 //filter 

 useEffect(() => {
   if (content === "") {
     setFilterData(data); 
     return;
   }

   const filteredData = filterData.filter((item) => item.Id === content);
   setFilterData(filteredData);
 }, [content]);

 const handleSubmit = (e) => {
   e.preventDefault();
 };

 const handleChange = (e) => {
   setContent(e.target.value);
 };
console.log (data);

 return (
   <Container className="text-center">
     <h3 className="my-3">
       Reciever Card for ➡️ <span>{title}</span>
     </h3>
     <Form onSubmit={handleSubmit} className="mt-3">
       <Form.Group className="d-inline-flex p-2" controlId="search">
         <Form.Control
           style={{ width: "80%" }}
           value={content}
           className="m-1"
           type="text"
           placeholder="Search"
           onChange={(e) => handleChange(e)}
         />
       </Form.Group>
     </Form>
     {filterData &&
       filterData.map((item, i) => {
        return (
     <Table striped bordered hover size="sm">
       <thead>
         <tr>
           <th>#</th>
           <th> Id</th>
           <th> Time</th>
           <th>Diff</th>
         </tr>
       </thead>
       <tbody>
         {computed.map((item, i) => {
           const enq_time = new Date(item.Time).toLocaleTimeString();
           const diffString = Diff(
             item.Time
           );
         
           return (
             <tr key={i}>
               <td>{i + 1}</td>
               <td>{item.Id}</td>
               <td>{enq_time}</td>
               <td>
                {diffString}
               </td>
             </tr>
           );
         })}

       </tbody>
     </Table>
        )})}
     </Container>
       
    
   

);
};
   
export default MovieCard;

>Solution :

You need to add the dependency for data and filterData

  useEffect(() => {
   if (content === "") {
     setFilterData(data); 
     return;
   }

   const filteredData = filterData.filter((item) => item.Id === content);
   setFilterData(filteredData);
 }, [content, filterData, data]);