In my react app, I have a component which is using the following code:

  <FormControlLabel
    labelPlacement="top"
    control={
      comp?.manualInput ? (
        <TextField
          name="price"
          type="number"
          variant="standard"
          value={comp.price}
          onChange={handleTextValueChange}
          sx={{ width: "150px" }}
        />
      ) : (
        <Box display="flex" alignItems="center">
          <TextField
            name="price"
            type="number"
            variant="standard"
            value={comp.price}
            onChange={handleTextValueChange}
            InputProps={{ readOnly: true }}
            sx={{ width: "150px" }}
          />
          <Tooltip
            title={
              comp.access &&
              comp.access.length > 0 ? (
                <Box>
                  {comp.comp.map((acc, index) => (
                    <Box key={index} sx={{ mb: 1 }}>
                      <strong>Type:</strong>
                      <br />
                      Id: {acc.id}
                      <br />
                      Description: {acc.description}
                    </Box>
                  ))}
                </Box>
              ) : (
                "No Type"
              )
            }
            placement="right"
            arrow
          >
            <InfoIcon
              color={
                comp.access &&
                comp.access.length > 0
                  ? "success"
                  : "action"
              }
              fontSize="small"
              style={{
                cursor: "pointer",
                marginTop: "-4rem",
              }}
            />
          </Tooltip>
        </Box>
      )
    }
    label="Price per Part"
  />

Once I hover over the info icon the tool tip opens and the content of the title is displayed inside. However, I am not knowing why I am not able to select the content by just clicking and select the content of the title in tool tip ?

Is MUI affecting the styling ? What am I missing here ? I was using in another file also a tool tip but in the title only contained a string and I am not using any jsx. I don’t know if the box and the jsx is affecting anything. I tried using <Box sx = {{ pointerEvents: 'auto' }}> but it didn’t do anything