Creating a marker in line chart when the x axis is based on a time scale

I am trying to create a x-axis marker (red line shown in the image) at the 12 PM point.

<ResponsiveLine
      ...
      xScale={{
        type: 'time',
        format: '%H:%M',
        precision: 'minute',
        useUTC: false,
      }}
      xFormat="time:%H:%M"
      yScale={{
        min: 0,
        max: 80,
        type: 'linear',
      }}
      axisLeft={{
        ...
        format: (e) => e + '%',
      }}
      axisBottom={{
        ...
        format: '%I %p',
        tickValues: `every 3 hours`,
      }}
     markers={[
        {
          axis: 'y',
          value: 50,
          lineStyle: { stroke: '#fff', strokeWidth: 2 },
          legend: 'y marker',
          textStyle: {
            fill: '#fff',
            fontSize: 15,
          },
        },
        {
          axis: 'x',
          value: '12:00', // Here is the error, unable to translate on x-axis
          lineStyle: {
            stroke: '#ff0000',
            strokeWidth: 2,
            opacity: 1,
          },
          legend: 'x marker',
          textStyle: {
            fill: '#fff',
            fontSize: 15,
          },
        },
      ]}
     ...
/>

As you can see, the red marker is being rendered at 0 position rather than 12 PM. I feel the error is at value: '12:00' because the xScale cannot transform the string to a correct pixel value that would have rendered the red line at the right location.

I have tried passing the time in all possible formats but the red line still gets rendered at the 0 point. When inspecting the red line, I get the following error.

Error: <g> attribute transform: Expected number, "translate(undefined, 0)".

<g transform="translate(undefined, 0)">
<line x1="0" x2="0" y1="0" y2="220" stroke="#000000" stroke-width="1" style="stroke: rgb(255, 78, 94); stroke-width: 2; opacity: 1;">
</line>
<text transform="translate(14, 14) rotate(0)" text-anchor="start" dominant-baseline="central" style="fill: rgb(255, 255, 255); font-size: 15px;">x marker</text>
</g>

Any suggestion is appreciated! @plouc @wyze

[arthuryeti]

@rahul-rxr I think you should use new Date()

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!