multiline tooltip or hover card not working properly with material react table cell

Question

I'm using "material-react-table": "^1.14.0" and I'm trying to show a multiline tooltip or hover card for a specific column that contains a long paragraph. I tried using "@mantine/core": "^6.0.21" tooltip and hover card, but both are not working correctly for multiline.

column definition:

{
        accessorFn: (row) => (
          <HoverCard width={300} shadow="md">
            <HoverCard.Target>
              <Box w={300}>
                <Text truncate>{row.judgeResponse}</Text>
              </Box>
            </HoverCard.Target>
            <HoverCard.Dropdown>
              <Text size="sm">{row.judgeResponse}</Text>
            </HoverCard.Dropdown>
          </HoverCard>
        ),
        id: "judgeResponse",
        header: "رد الدائرة",
        enableEditing: false,
        muiTableBodyCellEditTextFieldProps: ({ row }) => ({
          value: row.original.judgeResponse,
          sx: {
            display: `${row.original.kind === "MANUAL" ? "" : "none"}`,
          },
        }),
      }

result:

I tried using Mantine Tooltip and Hovercard, but I got the same result. Both aren't wrapping to show multiline content. I expect it's related to material react table, but I'm not sure what is it exactly