I am having an issue with recharts library, in this case BarChart component

What i want to achieve is to customize the label text in xAxis, i already created a custom component for tick, to make text too long having ellipsis or something like this, but seems i can't do anything for text overflow or decide any size. Here's my code so far:

function renderTicks(props) {
  console.log(props)
  const space = props.width / props.visibleTicksCount
  console.log(space)
  const stringLength = props.payload.value.length * 7
  console.log(stringLength)
  return (
    <text 
    style={{ fontSize: 10 }}
    width={70} verticalAnchor="start" textAnchor="middle" x={props.x} y={props.y}>{props.payload.value}</text>
  )
}

function BarChart({ config = {}, data = {} }) {
  console.log(data)
  return (
    <StyledChart width={450} height={450} data={data} >
      <XAxis
        tick={renderTicks}
        height={100}
        interval={0} dataKey="name" >
        <Label value="" content={<LabelCustom />} />
      </XAxis>
      <YAxis />
      <Tooltip />
      <Bar dataKey="value" fill={colorsChart[0]} />
    </StyledChart>
  );
}

Here is the current behaviour:

I found lot of problem like this browsering the problem but not valid solution, any tip is appreciated