Mui ui Tabs does not show the data from another component unless i click on it

So this is kind of weird. I have pretty standard Tabs from Mui ui:

<Box sx={{ width: "100%" }}>
          <Box
            sx={{
              marginTop: 5,
              borderBottom: 1,
              borderColor: "divider",
              maxWidth: 550,
            }}
          >
            <Tabs
              value={tabsValue}
              onChange={handleTabsChange}
              aria-label="basic tabs example"
            >
              <Tab label="Price" {...a11yProps(0)} />
              <Tab label="Ancillary" {...a11yProps(1)} />
              <Tab label="Seat" {...a11yProps(2)} />
            </Tabs>
          </Box>
          <TabPanel value={tabsValue} index={0}>
            <PriceTable data={currentItem.prices} />
          </TabPanel>
          <TabPanel value={tabsValue} index={1}>
            second panel
          </TabPanel>
          <TabPanel value={tabsValue} index={2}>
            third panel
          </TabPanel>
        </Box>

And hier is Table:

const PriceTable = ({ data }) => {
  const [pricesTable, setPricesTable] = useState(data);
  const [addFormDataPrice, setAddFormDataPrice] = useState({
    tier: "",
    discount: "",
    type: "",
  });
  console.log(pricesTable);
  const handleAddFormChangePrice = (event) => {
    event.preventDefault();
    const fieldName = event.target.getAttribute("name");
    const fieldValue = event.target.value;
    const newFormData = { ...addFormDataPrice };
    newFormData[fieldName] = fieldValue;
    setAddFormDataPrice(newFormData);
  };

  const handleAddTablePrice = (event) => {
    event.preventDefault();
    const newItem = {
      tier: addFormDataPrice.tier,
      discount: addFormDataPrice.discount,
      type: addFormDataPrice.type,
    };
    const newPrice = [...pricesTable, newItem];
    setPricesTable(newPrice);
  };
  return (
    <Box>
      <Box
        component="form"
        sx={{
          "& .MuiTextField-root": { m: 1, width: "15ch" },
          marginBottom: 2,
        }}
        noValidate
        autoComplete="off"
      >
        <TextField
          id="outlined-basic"
          name="tier"
          label="Tier"
          variant="outlined"
          size="small"
          onChange={handleAddFormChangePrice}
        />
        <TextField
          id="outlined-basic"
          name="discount"
          label="Discount"
          variant="outlined"
          size="small"
          onChange={handleAddFormChangePrice}
        />
        <TextField
          id="outlined-basic"
          name="type"
          label="Type"
          variant="outlined"
          size="small"
          onChange={handleAddFormChangePrice}
        />
        <IconButton
          sx={{ color: "#86ad84", marginTop: 1 }}
          onClick={handleAddTablePrice}
        >
          <Add />
        </IconButton>
      </Box>
      <form>
        {/* why??? */}
        <TableContainer sx={{ maxWidth: 500 }} component={Paper}>
          <Table aria-label="simple table">
            <TableHead>
              <TableRow>
                <TableCell align="center">Tier</TableCell>
                <TableCell align="center">Discount</TableCell>
                <TableCell align="center">Type</TableCell>
                <TableCell align="center">Action</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {pricesTable.map((row, i) => (
                <Fragment>
                  {/* <EditableRowPrice /> */}
                  <ReadOnlyPrice key={i} row={row} />
                </Fragment>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      </form>
    </Box>
  );
};
export default PriceTable;

And when I load the page it shows empty page at firs, then i switch to another tab and back and only then it shows the data. Why is that? I don't have any extra routing there. However when table inside Tabpanel data shows fine. Does anyone have any idea why it dosent work properly?