Evaluate does not inject the react props into MarkDown links

[ChezMose]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and discussions and couldn’t find anything (or linked relevant results below)

Affected package

@mdx-js/[email protected]

Steps to reproduce

Context

A client-side React application

Repro

import React from 'react';
import * as runtime from 'react/jsx-runtime'
import { evaluate } from '@mdx-js/mdx';

/* ---------------------------------------
  Create a component with the given injectable expression
--------------------------------------- */
const useInjectable = (
  expression,
) => {
  const [component, setComponent] = React.useState(() => () => <div>--</div>);

  React.useEffect(() => {
    evaluate(expression, runtime)
      .then(({ default: evaluated }) => {
        setComponent(() => evaluated);
      });
  }, [])

  return component;
}

/* ---------------------------------------
  Test the hook
--------------------------------------- */
export const TestInjectable = () => {
  const Component = useInjectable('### Reach us by email: [{props.email}](mailto:{props.email})');

  return (
    <div className="whatever">
      <Component
        email="[email protected]"
      />
    </div>
  );
};

Actual behavior

The email prop is correctly injected into the text part of the link, but not into the href.

<h3>Reach us by email: <a href="mailto:%7Bprops.email%7D">[email protected]</a></h3>

My first guess what that Url encoding occurred before the injection, but I've had a similar behavior using an actual 'a' tag.
My second guess is that it's a security matter, but that's a real limitation in my case.

Expected behavior

I wonder if it's an issue or an intended behavior.
And I am interested if there is a way to force the injection.

Runtime

Any web browser

Package manager

[email protected]

Operating system

Windows 11

Build and bundle tools

webpack

[remcohaszing]

Duplicate of #2493