() => {
  const parentRef = useArrowKeyNavigation({
    selectors: 'a:not(:disabled),button:not(:disabled),input:not(:disabled)',
  });

  return (
    <div ref={parentRef}>
      <Button className="mb-2 mb-sm-0" autoFocus>Brand</Button>{' '}
      <Button className="mb-2 mb-sm-0" variant="outline-brand">Outline Brand</Button>{' '}
      <Button className="mb-2 mb-sm-0" variant="outline-primary">Outline Primary</Button>{' '}
      <Button className="mb-2 mb-sm-0" variant="tertiary">Tertiary</Button>{' '}
    </div>
  );
};

() => {
  const parentRef = useArrowKeyNavigation({
    selectors: 'a:not(:disabled),button:not(:disabled),input:not(:disabled)',
    ignoredKeys: ['ArrowRight', 'ArrowLeft'],
  });

  return (
    <Form ref={parentRef}>
        <Form.Group>
          <Form.Label>Full name:</Form.Label>
          <Form.Control placeholder="Enter full name" />
        </Form.Group>

        <Form.Group>
          <Form.Label>Email:</Form.Label>
          <Form.Control type="email" placeholder="Enter email" />
        </Form.Group>

        <Form.Group>
          <Form.Label>Password:</Form.Label>
          <Form.Control type="password" placeholder="Password" />
        </Form.Group>
        <Form.Group>
          <Form.Check type="checkbox" label="Confirm the entered data" />
        </Form.Group>

        <Button variant="primary" onClick={() => alert('Submitted!')}>
          Submit
        </Button>
    </Form>
  );
};