Why doesn't state change when using the useState hook?

Question

React

Hi all! For the first time I encountered such a problem, I seem to be doing everything right, but the state does not change.
I declare as usual like this: I try to change like this: But it does not change, does not react at all. Hung an event on the button, when clicked, the state should change to true. The main thing is when I try to do this through the callback, console.log works in the callback, but the state remains the same.
const [isAdding, setIsAdding] = useState(false);
setIsAdding(true)

setIsAdding(prevState => { 
console.log(prevState);
return true;
})

Here is the component code in its entirety:

import React, { useState } from 'react';
import styled from 'styled-components'

const Container = styled.div`
    width: 100%;
    padding: 50px 20px;
    display: flex;
    justify-content: space-around;
    box-sizing: border-box;
    flex-wrap: wrap;
`;
const TableContainer = styled.div`
    width: 500px;
`;
const Table = styled.div`
    width: 100%;
    background-color: gray;
    margin-bottom: 40px;
`;
const TableHeader = styled.p`
    color: purple;
    margin-bottom: 40px;
    font-size: 24px;
    font-weight: bold;
`;
const HeaderRow = styled.div`
    width: 100%;
    border-bottom: 2px solid purple;
    color: purple;
    text-align: center;
    display: flex;
    position: relative;
`;
const Row = styled.div`
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #fff;
    display: flex;
    position: relative;
    box-sizing: border-box;
`;
const Col = styled.div`
    width: ${props => props.position === 'left' ? '65%' : '35%'};
    height: 100%;
    padding: 10px;
    border-right: 1px solid #fff;
    display: flex;
    align-items: center;
    &:last-child {
        border-right: none;
    }
    box-sizing: border-box;
`;
const RowButton = styled.div`
    width: 30px;
    height: 30px;
    background-color: ${props => props.delete ? 'pink' : 'green'};
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: absolute;
    right: -35px;
    top: 50%;
    margin-top: -15px;
    font-size: 24px;
    color: #fff;
`;

const EditBtn = styled.button`
    padding: 10px 20px;
    background-color: pink;
    color: #fff;
    cursor: pointer;
    border: none;
    text-transform: uppercase;
`;
const EditInput = styled.input`
    width: 100%;
    height: 30px;
    border: none;
`;
const DirectoriesSettings = () => {
    const [ isEditing, setIsEditing ] = useState(false);
    const [ isAdding, setIsAdding ] = useState(false);

    const onEditBtn = () => {
        setIsEditing(prev => {
            console.log(prev)
            return true;
        })
    }
    const onAddBtn = () => {
        setIsEditing(false)
        setIsAdding(true)
    }
    return (
        <Container>
            <TableContainer>
                <Table>
                    <HeaderRow>
                        <Col position={'left'}>some text</Col>
                        <Col>some text</Col>
                    </HeaderRow>
                    <Row>
                        <Col position={'left'}>some text</Col>
                        <Col>3</Col>
                    </Row>
                    <Row>
                        <Col position={'left'}>some text</Col>
                        <Col>20</Col>
                    </Row>
                    <Row>
                        <Col position={'left'}>some text</Col>
                        <Col>80</Col>
                    </Row>
                </Table>
            </TableContainer>

            <TableContainer>
                <TableHeader>some text</TableHeader>
                <Table>
                    <HeaderRow>
                        <Col position={'left'}>some text</Col>
                        <Col>some text</Col>
                        <RowButton>+</RowButton>
                    </HeaderRow>
                    <Row>
                        <Col position={'left'}>
                            {isEditing ? <EditInput type="text" defaultValue="some text" /> : 'some text'}
                        </Col>
                        <Col>
                            {isEditing ? <EditInput type="text" defaultValue="ПР" /> : 'ПР'}
                        </Col>
                        <RowButton delete>x</RowButton>
                    </Row>
                    <Row>
                        <Col position={'left'}>
                            {isEditing ? <EditInput type="text" defaultValue="some text" /> : 'some text'}
                        </Col>
                        <Col>
                            {isEditing ? <EditInput type="text" defaultValue="some text" /> : 'some text'}
                        </Col>
                        <RowButton delete>x</RowButton>
                    </Row>
                    <Row>
                        <Col position={'left'}>
                            {isEditing ? <EditInput type="text" defaultValue="some text" /> : 'some text'}
                        </Col>
                        <Col>
                            {isEditing ? <EditInput type="text" defaultValue="ФР" /> : 'ФР'}
                        </Col>
                        <RowButton delete>x</RowButton>
                    </Row>
                </Table>
                <EditBtn onClick={onEditBtn}>Редактировать</EditBtn>
            </TableContainer>
        </Container>
    )
}

export default DirectoriesSettings;

PS. The project is not mine, I was given it to add some functionality. Can anyone come across this?

Answer 1

In the code
1) onAddBtn is not called from anywhere, hang it on a button with a plus on the onClick event so that it fires
2) isAdding is not displayed anywhere, how do you know that it does not fire?
If you hang it on a button and display the result, it turns out that everything changes remarkably