This simple code creates a disabled button:

import { Grid, IconButton } from "@material-ui/core";
import ArrowBackIosIcon from "@material-ui/icons/ArrowBackIos";

export default function App() {
  const handleClick = (e) => {
    e.stopPropagation();
  };

  return (
    <div className="App">
      <Grid container>
        <Grid item>Before</Grid>
        <Grid item>
          <IconButton disabled onClick={handleClick}>
            <ArrowBackIosIcon />
          </IconButton>
        </Grid>
        <Grid item>After</Grid>
      </Grid>
    </div>
  );
}

But when clicking on the button the "After" div gets selected. I have tried to prevent it by adding an event hanlder but it does not help.

How can I prevent "After" from being selected when clicking the enabled button?

here is my CodeSandBox: https://codesandbox.io/s/focused-elion-1tmtz0