React почему после set useState не меняет значение?

Question

[Сергей Ы]

НАРОД ВЫРУЧАЙТЕ, я работаю на джанго, но тут прилетел проект который нужно совсем чутка доделать причём быстро, с реактом знаком но давно, объясните мне почему после setBaseText(`${event.target.value} lalalala`) -- например (это я уже издевался с лалала), baseText - остается прежним как и всё остальное для отправки, но в инпуте как надо меняется (лала для этого кстати) у меня тупик))) Что аксиос тут прошу без критики это временно для теста, потом уберу куда нужно

const GenerationPage = (): JSX.Element => {
  const history = useHistory();
  
  const [texts, setTexts] = useState([]);
  const [selectedGenerationType, setSelectedGenerationType] = useState(GENERATION_TYPES.REWRITE);
  const [baseText, setBaseText] = useState('This is a set of tasty products for weight loss');
  const [isGenerationsVisible, setIsGenerationsVisible] = useState(false);
  const [isProcessing, seIsProcessing] = useState(false);
  const [symbolsRange, setSymbolsRange] = useState([60, 5000]);
  const [isAutoGeneration, setIsAutoGeneration] = useState(false);

  const {workspaceId} = useParams<{workspaceId: string}>();

  const {t} = useTranslation();

  const GENERATION_MODE_OPTIONS = useMemo(
    () => [
      {label: t('generation.rewrite'), value: GENERATION_TYPES.REWRITE},
      {label: t('generation.minimizeToTheCore'), value: GENERATION_TYPES.MINIMIZE_TEXT},
      {label: t('generation.copyright'), value: GENERATION_TYPES.COPYRIGHT},
    ],
    [t],
  );

  const textMoodDropdownOptions = useMemo<Array<DropdownOption>>(() => {
    return Object.values(mockTextMoodOptions).map((item) => {
      return {
        value: item.value,
        label: item.flag + ' ' + item.label,
      };
    });
  }, []);

  const onGenerateText = useCallback(async () => {
    setIsGenerationsVisible(false);
    seIsProcessing(true);
    // setTimeout(() => {
    //   seIsProcessing(false);
    //   setBaseText('');
    //   setIsGenerationsVisible(true);
    // }, 3000);
    const apiUrl = 'http://localhost:8000/test'
    let data
    //ПОЧЕМУ ЗДЕСЬ НЕ ОБНОВЛЁННЫЙ СТЭЙТ
    let payload = {
      text : baseText,
      role : 'Копирайтер',
      func : selectedGenerationType,
      len_min : symbolsRange[0],
      len_max : symbolsRange[1]
    }

    try {
      const requestConfig: AxiosRequestConfig = {
        method: 'post',
        url: apiUrl,
        data: payload

      };
      const response = await axiosConfig(requestConfig);
      checkIsResponseDataExists(response.data);
  
      data = response.data;
    } catch (error) {
      console.log(error);
    }
    console.log(data)
    seIsProcessing(false);
    setBaseText('');
    setIsGenerationsVisible(true);
    setTexts(data.answers);
  }, []);


  const handleOnChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
    setBaseText(`${event.target.value} lalalala`)
    //ПОЧЕМУ ДАЖЕ ЗДЕСЬ НЕ ОБНОВЛЁННЫЙ СТЭЙТ
    console.log(baseText)
},[]) 


  return (
    <ContentContainer>
      <GenerationSetupContainer>
        <div className={'back-to-projects-button-container'}>
          <BackToProjectsButton
            className={'back-to-projects-button-container__button'}
            title={t('generation.backToProjects')}
            icon={ArrowBack}
            iconAlign={CUSTOM_BUTTON_ICON_ALIGN.LEFT}
            buttonHeight={BUTTON_HEIGHT.THIN}
            onClick={() => history.push('/workspaces/' + workspaceId)}
          />
        </div>
        <RadioGroup
          className={'radio-group'}
          options={GENERATION_MODE_OPTIONS}
          selectedOptionValue={selectedGenerationType}
          onSelectOption={(index) =>
            setSelectedGenerationType(GENERATION_MODE_OPTIONS[index].value)
          }
        />
        <TextBlock className={'generation-description'} type={TEXT_BLOCK_TYPE.P5}>
          {t('generation.generatorDescription')}
        </TextBlock>
        <CustomInput
          placeholder={t('generation.yourText')}
          name={'baseText'}
          isMultiline={true}
          value={baseText}
          limitCount={5000}
          isInputLimited={true}
          // onChange={(e) => setBaseText(e.target.value)}
          onChange={handleOnChange}
        />
        <GenerationBottomControls>
          <div>
            <TextBlock className={'heading-text'} type={TEXT_BLOCK_TYPE.P5}>
              {t('generation.chooseTextTone')}
            </TextBlock>
            <TextBlock className={'secondary-text'} type={TEXT_BLOCK_TYPE.P5}>
              {t('generation.textChooseSubHeader')}
            </TextBlock>
            <CustomDropdown
              options={textMoodDropdownOptions}
              selectedOption={textMoodDropdownOptions[0]}
              onSelect={_.noop}
            />
          </div>
          <div>
            <TextBlock className={'heading-text'} type={TEXT_BLOCK_TYPE.P5}>
              {t('generation.generationSymbolsCount')}
            </TextBlock>
            <TextBlock
              className={'secondary-text secondary-text_generation-count'}
              type={TEXT_BLOCK_TYPE.P5}>
              {t('generation.generationSymbolsCountSubheader')}
            </TextBlock>
            <RangeSelect
              disabled={isAutoGeneration}
              className={'range-select'}
              
              onChange={(value) => setSymbolsRange(value)}
              values={symbolsRange}
              step={1}
              minNumber={60}
              maxNumber={5000}
            />
            <CheckboxInput
              checked={isAutoGeneration}
              onChange={(e) => setIsAutoGeneration(e.target.checked)}
              label={t('generation.autoSymbolsCountCalculate')}
            />
          </div>
        </GenerationBottomControls>
        <CustomButton
          className={'generate-button'}
          title={t('generation.generateText')}
          onClick={onGenerateText}
        />
      </GenerationSetupContainer>

      {(isGenerationsVisible || isProcessing) && <HorizontalDelimiter />}

      {isProcessing && <GenerationProcessingBlock />}

      {isGenerationsVisible && (
        <GenerationResultContainer>
          {texts?.length > 0 && texts?.map((text) => <GenerationResultBlock text={text} />)}
        </GenerationResultContainer>
      )}
    </ContentContainer>
  );
};

export default GenerationPage;