Reading a txt file and put the data in table + calculate - reactjs

Question

I'm very new to React and I'm playing around with file uploading and reading the values.
I currently have an app where I want to upload a file (the file has different content every time, but the header info stays the same) and format the content, put it into a table and calculate some results.
The txt file contains several rows with information about cable types (Mx) and the length of cable necessary.
I'm trying to
isolate the content to get only rows with 'mx' content
split the content, so I can separate types of cable and lengths
calculate the cumulative length of all cables
There are 4 types (I think) and the format is unfortunately like this
2xM14+1xM10 225.67 0.00 0.00
The first part is types of cables and multiple needed (2xM14 means I have to double the lengths for the results)
The second part is length for each cable (if I have 2xM14 and 1xM10 I need 2xM14225.67 and 1xM10225.67)
The rest is not relevant.
import { Box, Button, TextField } from '#mui/material';
import React, { Component } from 'react';
import { useState, useEffect } from 'react';
import Table from '#mui/material/Table';
import TableBody from '#mui/material/TableBody';
import TableCell from '#mui/material/TableCell';
import TableContainer from '#mui/material/TableContainer';
import TableHead from '#mui/material/TableHead';
import TableRow from '#mui/material/TableRow';
import Paper from '#mui/material/Paper';
export default function Cable() {
const [text, setText] = useState('čekám na soubor');
const [lines, setLines] = useState([]);
const [newLines, setNewLines] = useState([]);
const [results, setResults] = useState(
[{ letters: [], numbers: [] }]
);
const typy = ['M7', 'M10', 'M14', 'M16'];
const [types, setTypes] = useState('');
const showFile = (e) => {
e.preventDefault();
const reader = new FileReader();
reader.onload = (e) => {
const text = e.target.result;
setText(text); // inserts doc
setLines(text.split('\n')) // split text into rows
console.log(lines);
};
reader.readAsText(e.target.files[0]);
};
// selects rows containing 'xM'
const splitLines = (e) => {
setLines(lines.filter(line => line.includes('xM')))
console.log(lines)
}
const splitArr = () => {
const result = lines.reduce((a, c) => {
const [letters, numbers] = c.split(/[ ]+/);
a.push({ letters, numbers });
return a;
}, []);
setResults(() => [...result]);
// setTypes((result.letters).replace(/[x||+]/g, ' '))
console.log(results);
// console.log(types);
};
return (
<Box>
<input type="file" onChange={showFile} />
<TextField
label='gde soubor?'
variant='outlined'
value={text}
fullWidth
disabled
multiline
rows={12}
>{types}</TextField>
<Button onClick={splitLines}>Rozděl do typů - Mx</Button> <br />
<Button onClick={splitArr}>Vlož do tabulky - a vyber délku</Button> <br />
<TableContainer component={Paper} sx={{ minWidth: 650, marginBottom: 5, marginTop: 5}}>
<Table sx={{ minWidth: 650}} aria-label="simple table">
<TableHead>
<TableRow >
<TableCell>Typ</TableCell>
<TableCell>Délka</TableCell>
</TableRow>
</TableHead>
<TableBody >
{results.map((radky, index) => (
<TableRow key={index}>
<TableCell component="th" scope="row" sx={{ fontSize: 11, background: '#eeeeee' }}>
{radky.letters}
</TableCell>
<TableCell component="th" scope="row" sx={{ fontSize: 11, background: '#eeeeee' }}>
{radky.numbers.length > 0 && parseFloat(radky.numbers)}
</TableCell>
<TableCell component="th" scope="row" sx={{ fontSize: 11, background: '#eeeeee' }}>
{radky.letters.length > 0 && radky.letters.replace(/[x||+]/g, ' ')}
</TableCell>
<TableCell component="th" scope="row" sx={{ fontSize: 11, background: '#eeeeee' }}>
{radky.letters.length > 0 && radky.letters.replace(/[x||+]/g, ' ').split(' ') }
</TableCell>
<TableCell component="th" scope="row" sx={{ fontSize: 11, background: '#eeeeee' }}>
{radky.letters.length > 0 && radky.letters.replace(/'M10'/g, '*')}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Box>
);
}
I also replicated the app on stackblitz(https://stackblitz.com/edit/react-f3zts7)
I'm not sure what should be the ideal way how to do this, any help would be greatly appreciated.