How to change state value of useState immidiately inside a function in react

Question

I am trying to change my state value by clicking on some items. For doing that, i have initialized a useState hook, that is,

const [result, setResult] = useState({});

I have an array of items, which i mapped inside my return function, which is,

{item.options &&
                                                                    item.options.map((optionItem, index) => {
                                                                        return <Paper
                                                                            elevation={10}
                                                                            key={index}
                                                                            sx={{
                                                                                p: "10px",
                                                                                minWidth: 50,
                                                                                minHeight: 30,
                                                                                display: "flex",
                                                                                justifyContent: "center",
                                                                                alignItems: "center",
                                                                                cursor: "pointer",
                                                                                backgroundColor: result[item.title] === optionItem.trim() ? (theme) =>
                                                                                    theme.palette.primary.light : "inherit",
                                                                                "&:hover": {
                                                                                    borderColor: (theme) =>
                                                                                        theme.palette.primary.deep,
                                                                                },
                                                                            }}
                                                                            onClick={() => variationsHandler(item.name, item.title, optionItem)}
                                                                        >
                                                                            <Typography>{optionItem}</Typography>
                                                                        </Paper>
                                                                    })}

when i click each mapped item, i called a function which is,

const variationsHandler = (name, attributesName, option) => {
        console.log("vvv", name, attributesName, option);
        setResult({
            ...result,
            [attributesName]: option.replace(/ /g, ""),
        });
        setSome(
            (some) => ({
                ...some,
                [name]: option.trim(' '),
            })


        )
        console.log(result[attributesName], option, "attributes");
        console.log(result, "this is result");
        console.log(some, "this is some");
    };

Inside this function i am trying so change the state of result. But it doesn't change immediately. How to change the state inside this function based on per click.