How can I select text on #text element?

• SelTd is draggable and has onDragStart event.
• #textparent is relative, #text is absolute
• the goal – mouse selection of the text in #text and copy it

If I click mouse down and move on #text to copy it, JS trigger drag event on td element and prevents to select text.

Full code on codesandbox.

const SelTd = ({ children }: PropsWithChildren<any>) => {
    const ref = useRef(null)
    const onDragStart = useCallback((e: any) => {
        e.preventDefault()
        e.stopPropagation();
        ref.current && (ref.current.style.backgroundColor = 'yellow')
        setTimeout(() => {
            ref.current.style.backgroundColor = 'unset'
        }, 5 * 1000)
    }, [])
    return <td
        ref={ref}
        className="Td"
        draggable={true}
        onDragStart={onDragStart}

    >
        {children}
    </td>
}
export default function App() {
  return (
    <table>
      <tbody>
        <tr>
          <SelTd>
            <div className="Container">
              <div className="Abs" id="text">
                text to select
              </div>
            </div>
          </SelTd>
          <td className="Td">2</td>
        </tr>
      </tbody>
    </table>
  );
}