<!-- Thank you for your contribution. Before you submit the issue:
1. Search open and closed issues for duplicates.
2. Read the contributing guidelines.
-->

Description

The web component renders a <style> tag containing a literal CSS
@import string instead of interpolating the cssImportPath value.

Specifically, the following code:

<style>@import '{finalCssImportPath}';</style>

does not interpolate finalCssImportPath in JSX. As a result, the
browser receives the CSS import as a literal string and the stylesheet
is never loaded.

This causes the component styles to be missing even when a valid
cssImportPath is provided.

This issue affects the web component rendering logic and occurs
consistently whenever the component is rendered.

Environment

• OS: Any
• Browser: Any modern browser
• Framework: React (web component usage)

Expected Result

The value of cssImportPath should be correctly interpolated into the
CSS @import statement so that the referenced stylesheet is loaded and
applied at runtime.

Actual Result

The rendered output contains a literal string:

@import '{finalCssImportPath}';

instead of the resolved CSS path, causing the stylesheet import to fail.

Steps to Reproduce

1. Use the AsyncApiWebComponent and provide a custom cssImportPath
   prop.
2. Render the component in a browser.
3. Inspect the rendered <style> tag in the DOM.
4. Observe that {finalCssImportPath} appears as a literal string and
   the CSS file is not loaded.

Troubleshooting

• Verified that cssImportPath contains a valid path.
• Confirmed that JSX does not interpolate variables inside string
  literals.
• Identified that using a JSX expression (template literal) resolves
  the issue, for example:

<style>{`@import '${finalCssImportPath}';`}</style>