react js state value always false

hello im trying to make a array that contain a objects and i want to map this array into two tables :thisis stricture of array:

0
: 
{title: 'uml', agreement: false}
1
: 
{title: 'react', agreement: false}
2
: 
{title: 'laravel', agreement: false}
length
: 
3
[[Prototype]]
: 
Array(0) 

and i have a checkbox that make agreement true or false . but the problem is everytime the agreement is false. i want to send objects to first table if is true and to seconde table if is false but everytime is send to first table with false agreement . this is all of code: some functions is just to show the values of states

import './App.css';
import { useRef, useState } from 'react';

function App() {

  const [modules,setModules]=useState([])
  const [agreement,setAgreement]=useState()
  const [title,setTitle]=useState()
  const checkbox=useRef()

  function handlecheck(){

    setAgreement(checkbox.current.checked)
    
  }
  function handlechange(event){
    setTitle(event.target.value)

  }
  function ajouter(){
    setModules([...modules,{title,agreement}])
    
  }
  function affich(){
    return console.log(modules)
  }


  return (
    <div className="App">
      <section class="container cd-table-container">
        <h2 class="cd-title">Insert Table Record:</h2>
        <input onChange={(event)=>handlechange(event)} type="text" class="cd-search table-filter" data-table="order-table" placeholder="module name" />
        <button className='ajouter' onClick={()=>ajouter()}  >Ajouter</button>
        <button className='ajouter' onClick={()=>affich()}  >affich</button>
        <input type={"checkbox"} ref={checkbox}   onChange={(event)=>handlecheck(event)} />
        <table class="cd-table table">
          <thead>
            <tr>
              <th>modules regionaux</th>
            </tr>
          </thead>

          <tbody>
            {
              modules.map((elm,index)=>{
                if(elm.agreement=true){
                  return (<tr>
                    <td>{elm.title}</td>
                  </tr>)
                }
              })
            }
          </tbody>
        </table>
        <br></br>
        <table class="cd-table table">
          <thead>
            <tr>
              <th>modules non regionaux</th>
            </tr>
          </thead>

          <tbody>
          {
              modules.map((elm,index)=>{
                if(elm.agreement=false){
                  return (<tr>
                    <td>{elm.title}</td>
                  </tr>)
                }
              })
            }
          </tbody>
        </table>
      </section>
    </div>
  );
}

export default App;