Обновление надписи на вершине графа в зависимости от введенного в поле ввода текста

import axios from "axios";
import React, { useState, useRef, useEffect } from "react";
import { XYPlot, LineSeries, MarkSeries } from 'react-vis';
import { VictoryTooltip } from 'victory';
 
const FormikForm = () => {
  const [data, setData] = useState([]);
  const [text, setText] = useState('');
 
  const handleInputChange = event => {
    const newText = event.target.value;
    setText(newText);
 
    if (data.length === 0 && newText !== "") {
      const newData = [{ x: 1, y: 0, label: newText }];
      setData(newData);
    } else if (data.length > 0) {
      const newData = [...data];
      newData[0].label = newText;
      setData(newData);
    }
  };
 
  return (
    <div>
      <input type="text" value={text} onChange={handleInputChange} />
 
      <div style={{ width: '100vw', height: '100vh' }}>
        <XYPlot margin={{ top: 50, right: 50, bottom: 50, left: 50 }}>
          <MarkSeries
            data={data}
            symbol="circle"
            size={35}
            labelStyle={{ fontSize: 12, fontWeight: 'bold', textAnchor: 'middle' }}
            labelComponent={<VictoryTooltip label={text} />}
          />
        </XYPlot>
      </div>
    </div>
  );
};
 
export default FormikForm;