showNotification is not there anymore

I am using the latest version "@mantine/notifications": "^5.10.4", but the example for notifications isn't working because showNotification doesn't exist. Do you know what may be the problem?

import React from 'react';
import { Group, Button } from '@mantine/core';
import { useNotifications } from '@mantine/notifications';

function Demo() {
  const notifications = useNotifications();

  return (
    <Group position="center">
      <Button
        variant="outline"
        onClick={() =>
          notifications.showNotification({
            title: 'Default notification',
            message: 'Hey there, your code is awesome! 🤥',
          })
        }
      >
        Show notification
      </Button>
    </Group>
  );
}

First look at versions @mantine/core and @mantine/notifications are the same.

Did you call <Notification /> tag on your root file ( like this

import { MantineProvider } from '@mantine/core';
import { Notifications } from '@mantine/notifications';

function Demo() {
  return (
    <MantineProvider withNormalizeCSS withGlobalStyles>
      <Notifications />
      <App />
    </MantineProvider>
  );
}

for more information you can look this doc.

You should not be using the useNotifications hook to send your message, but rather import the shownotification function from the @mantine/notifications package and use it directly in your code. Your code should be rewritten like this:

import React from 'react';
import { Group, Button } from '@mantine/core';
import { showNotification } from '@mantine/notifications';

function Demo() {
  return (
    <Group position="center">
      <Button
        variant="outline"
        onClick={() =>
          showNotification({
            title: 'Default notification',
            message: 'Hey there, your code is awesome! 🤥',
          })
        }
      >
        Show notification
      </Button>
    </Group>
  );
}