useState, got to click twice

Hello everyone, pretty common issue for React beginers I suppose, I set the value of a const using useState, on the first click I get the last value (not updated) on the second click I get the expected result.

Here is the component where all of this happens. Basically my API call gets all pokemons and displays them. The “test” fonction is here to sort them by generation. My intent, when you click on a radio button, its sets the “min” value to the previous value from “selectedRadio” in the [digits] aray. It works, but when i click the first time, i get the updated value from selectedRadio, but the previous value for “min”. When I click the second time the “min” const is up to date. i read about useState not being updated as it is changed but cant find a way to better my code here. Any precious intel ?

import axios from "axios";
import React, { useEffect, useState } from "react";
import Cards from "./Cards";
let url = "https://pokeapi.co/api/v2/pokemon/?limit=12000";

const Pokemons = () => {
  const digits = [151, 251, 386, 493, 649, 721, 809, 905, 10300];
  const [dataName, setDataName] = useState([]);
  const [selectedRadio, setSelectedRadio] = useState("");
  const [min, setMin] = useState("");

  const test = () => {
    digits.forEach((element) => {
      if (element == selectedRadio) {
        setMin(digits[digits.indexOf(element) - 1]);
      }
    });
  };

  useEffect(() => {
    console.log(selectedRadio);
    console.log(min);
  }, [min, selectedRadio]);

  useEffect(() => {
    (async () => {
      const pokeName = await axios(url).then((res) =>
        setDataName(res.data.results)
      );
    })();
  }, [dataName]);

  return (
    <div className="pokemon-name">
      <ul className="optionTab">
       
        {digits.map((Gen, index) => (
          <ul>
            <label htmlFor="Gen">{`Gen ${index + 1} `}</label>
            <input
              className={digits}
              id={Gen}
              name="Gen"
              type="radio"
              onClick={test}
              onChange={(e) => setSelectedRadio(e.target.id)}
            />
          </ul>
        ))}
      </ul>

      <ul>
        {dataName
          .slice(min, selectedRadio)
          .slice(0, selectedRadio)
          .map((pokemon, index) => (
            <Cards key={index} pokemon={pokemon} />
          ))}
      </ul>
    </div>
  );
};

export default Pokemons;