Using React.js,, I am trying to filter projects table by project size, but there is a problem the state is always one step back

here is my handler method

 handleProjectSize = (projectSize) => {
this.setState({ selectedProjectSize: projectSize });
console.log('selected: ', this.state.selectedProjectSize);
console.log('clicked: ', projectSize);
console.log('-----------------------------------------');

};

and here is a condition for filtering the projects if I click on a filter - in the render method

const filterdProjects = this.selectedProjectSize
  ? projects.filter((ps) => ps.projectSize._id === selectedProjectSize._id)
  : projects;

and here is my element

 <ul className='list-group'>
          {projectSizes.map((projectSize) => (
            <li
              className='list-group-item'
              key={projectSize._id}
              onClick={() => this.handleProjectSize(projectSize)}
            >
              {projectSize.name}
            </li>
          ))}
        </ul>

Important Note: All this code is in one component

in this screenshot you can see the values on console when I pressed all projects still the selected variable is undefined and then when I click the major, the selected is still all project... and that means there is one step delay